Question

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

$('.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>

当我单击它时，返回以下内容：

未捕获的TypeError：copyText.select不是函数

Answer 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>

Answer 2

w3schools上的

This示例显示您需要使用文本字段才能使用.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);
})

Answer 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>

Answer 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 field MDN - HTMLInputElement - select

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

请参见this article。

将按钮属性中存在的文本复制到剪贴板

4 个答案: