Javascript 单击时复制文本字符串

Copy text string on click

提问by Matthew

I spent a good 20 min searching online for this, but couldn't find it. What I want is to to be able to copy a text string on click without a button. The text string will be inside a "span" class.

我花了 20 分钟在网上搜索这个，但找不到。我想要的是能够在没有按钮的情况下在单击时复制文本字符串。文本字符串将在“span”类中。

1. User hovers over text string
2. User clicks text string
3. Text string is copied to clipboard

1. 用户将鼠标悬停在文本字符串上
2. 用户点击文本字符串
3. 文本字符串被复制到剪贴板

Any help would be greatly appreciated. Thanks!

任何帮助将不胜感激。谢谢！

回答by guest271314

You can attach copyevent to <span>element, use document.execCommand("copy")within event handler, set event.clipboardDatato span.textContentwith .setData()method of event.clipboardData

您可以将copy事件附加到<span>元素，document.execCommand("copy")在事件处理程序中使用，设置event.clipboardData为span.textContentwith.setData()方法event.clipboardData

const span = document.querySelector("span");

span.onclick = function() {
  document.execCommand("copy");
}

span.addEventListener("copy", function(event) {
  event.preventDefault();
  if (event.clipboardData) {
    event.clipboardData.setData("text/plain", span.textContent);
    console.log(event.clipboardData.getData("text"))
  }
});

<span>text</span>

回答by prasanth

Try this .document.execCommand('copy')

尝试这个 。document.execCommand('copy')

1. click the element and copy the text and post with tmp input element
2. Then copy the text from this input

1. 单击元素并复制文本并使用 tmp 输入元素发布
2. 然后从此输入复制文本

function copy(that){
var inp =document.createElement('input');
document.body.appendChild(inp)
inp.value =that.textContent
inp.select();
document.execCommand('copy',false);
inp.remove();
}

<p onclick="copy(this)">hello man</p>

回答by Black Mamba

This is the Code pen.

这是代码笔。

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 

<p style="color:wheat;font-size:55px;text-align:center;">How to copy a TEXT to Clipboard on a Button-Click</p>

<center>
<p id="p1">This is  TEXT 1</p>
<p id="p2">This is TEXT 2</p><br/>

<button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>
<button onclick="copyToClipboard('#p2')">Copy TEXT 2</button>

<br/><br/><input class="textBox" type="text" id="" placeholder="Dont belive me?..TEST it here..;)" />
</center>

Jquery Code here

Jquery代码在这里

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

回答by Natesh bhat

Along with copying the text , you also have to make sure that any previously selected component remains selected after copying to clipboard.

除了复制文本之外，您还必须确保在复制到剪贴板后任何先前选择的组件仍保持选中状态。

Here's the full code :

这是完整的代码：

const copyToClipboard = str => {
  const el = document.createElement('textarea');  // Create a <textarea> element
  el.value = str;                                 // Set its value to the string that you want copied
  el.setAttribute('readonly', '');                // Make it readonly to be tamper-proof
  el.style.position = 'absolute';                 
  el.style.left = '-9999px';                      // Move outside the screen to make it invisible
  document.body.appendChild(el);                  // Append the <textarea> element to the HTML document
  const selected =            
    document.getSelection().rangeCount > 0        // Check if there is any content selected previously
      ? document.getSelection().getRangeAt(0)     // Store selection if found
      : false;                                    // Mark as false to know no selection existed before
  el.select();                                    // Select the <textarea> content
  document.execCommand('copy');                   // Copy - only works as a result of a user action (e.g. click events)
  document.body.removeChild(el);                  // Remove the <textarea> element
  if (selected) {                                 // If a selection existed before copying
    document.getSelection().removeAllRanges();    // Unselect everything on the HTML document
    document.getSelection().addRange(selected);   // Restore the original selection
  }
};

ps adding the source

ps 添加源

回答by Ricardo Canelas

HTML:

HTML：

<button type='button' id='btn'>Copy</button>

JS

JS

document.querySelect('#btn').addEventListener('click', function() {
   copyToClipboard('copy this text');
});

JS / Function:

JS / 功能：

function copyToClipboard(text) {
    var selected = false;
    var el = document.createElement('textarea');
    el.value = text;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    if (document.getSelection().rangeCount > 0) {
        selected = document.getSelection().getRangeAt(0)
    }
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
    }
};

回答by Pat Myron

guest271314's answerapplied to multiple elements:

guest271314 的答案适用于多个元素：

spans = document.querySelectorAll(".class");
for (const span of spans) {
  span.onclick = function() {
    document.execCommand("copy");
  }

  span.addEventListener("copy", function(event) {
    event.preventDefault();
    if (event.clipboardData) {
      event.clipboardData.setData("text/plain", span.textContent);
      console.log(event.clipboardData.getData("text"))
    }
  });
}

<span class="class">text</span>
<br>
<span class="class">text2</span>

回答by Gtm

function copy(that){
var inp =document.createElement('input');
document.body.appendChild(inp)
inp.value =that.textContent
inp.select();
document.execCommand('copy',false);
inp.remove();
}

<p onclick="copy(this)">hello man</p>