将按钮属性中的文本复制到剪贴板答案

【问题标题】：copy text present in button attribute to clipboard将按钮属性中的文本复制到剪贴板
【发布时间】：2019-03-08 14:31:53
【问题描述】：

我在按钮属性中有一些带有一些文本的按钮，我想要的是当我单击按钮时它会复制到剪贴板

$('.copyboard').on('click', function(e) {
  e.preventDefault();

  var copyText = $(this).attr('data-text');
  console.log(copyText);
  copyText.text().select();
  document.execCommand("copy");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>

当我点击它返回这个：

未捕获的类型错误：copyText.select 不是函数

【问题讨论】：

copyText.text().select(); 的目的是什么？您已经拥有 var copyText = $(this).attr('data-text'); 的数据文本内容
Click button copy to clipboard using jQuery的可能重复
@j08691 您需要使用.select() 将文本复制到剪贴板

标签： javascript jquery

【解决方案1】：

当您想将文本复制到剪贴板时，您需要在文本区域或输入中选择文本。
data 属性是标签 HTML 的一个属性，它是不可选择的。

如果将文本放入文本区域，则可以这样做，选择它并在复制后删除标签。

$('.copyboard').on('click', function(e) {
  e.preventDefault();

  var copyText = $(this).attr('data-text');

  var textarea = document.createElement("textarea");
  textarea.textContent = copyText;
  textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy"); 

  document.body.removeChild(textarea);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>

【讨论】：

【解决方案2】：

This w3schools 上的示例显示您需要使用文本字段才能使用 .select() 然后将其复制

例子：

<!DOCTYPE html>
<html>
<body>

<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("copy");
}
</script>

</body>
</html>

这就是您可以在代码中实现它的方式：

$('.copyboard').on('click', function(e) {
  e.preventDefault();

  var copyText = $(this).attr('data-text');
  var element = document.createElement("input"); 
  element.type = 'text';
  element.value = copyText;
  element.style.position = "fixed"; // Prevent MS edge scrolling.
  document.body.append(element);
  element.select();
  document.execCommand("copy");
  document.body.removeChild(element);
})

【讨论】：

【解决方案3】：

显然，您只能复制可见元素和输入元素。尝试类似：

   $('.copyboard').on('click', function(e) {
  e.preventDefault();

  var copyText = $(this).attr('data-text');
  var el = $('<input style="position: absolute; bottom: -120%" type="text" value="'+copyText+'"/>').appendTo('body'); 
  el[0].select();
  document.execCommand("copy");
  el.remove();
})


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>

【讨论】：

【解决方案4】：

根据文档This event is limited to <input type="text"> fields and <textarea> boxes. 见jquery - select()

同样，The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text fieldMDN - HTMLInputElement - select

作为一种解决方法，您可以在每次单击按钮时创建一个临时的、不可见且不可编辑的输入或文本区域，将必要的文本复制到剪贴板，然后再次删除输入。

见this article。

【讨论】：