js operation copy text

This time I will bring you the js operation to copy text. What are the precautions for js operation to copy text? The following is a practical case, let’s take a look.

I recently encountered a need to click a button to copy the text in the

tag to the clipboard

I have copied the contents of the input box before. I thought it was almost the same, but I found that It didn’t work at all

I tried various methods, and finally used a blind trick to achieve the following effect

##1. Principle analysis

The browser provides the copy command, which can copy the selected content

document.execCommand("copy")

If it is an input box, you can use the

select() method, Select the text in the input box, and then call the copy command to copy the text to the clipboard

But the select() method is only valid for and , but not for <p> </p> <p style="text-align: left;"></p>My final solution is to add a <textarea> to the page and then hide it<p style="text-align: left;"></p> <p style="text-align: left;">When clicking the button, first remove the <textarea> Change value to the innerText of <p>, and then copy the content in <textarea> <strong></strong>

2. Code implementation

HTML part

<style>
  .wrapper {position: relative;}
  #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>
<p>
  </p><p>我把你当兄弟你却想着复制我？</p>
  <textarea>这是幕后黑手</textarea>
  <button>copy</button>

JS part

<script>
  function copyText() {
   var text = document.getElementById("text").innerText;
   var input = document.getElementById("input");
   input.value = text; // 修改文本框的内容
   input.select(); // 选中文本
   document.execCommand(&quot;copy&quot;); // 执行浏览器复制命令
   alert("复制成功");
  }
 </script>

Personal test, Firefox 48.0, Chrome 60.0, IE 8 can all be used

I believe you have mastered the method after reading the case in this article. For more exciting things, please pay attention to php Chinese Other related articles online!

Recommended reading:

How to dynamically bind class names in WeChat mini programs

Implementation of the first letter search function in the address book

The above is the detailed content of js operation copy text. For more information, please follow other related articles on the PHP Chinese website!