javascript - 将按钮属性中的文本复制到剪贴板

Question

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

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

当我点击它时返回这个:

Uncaught TypeError: copyText.select is not a function

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>