单击按钮时在剪贴板中复制textarea的文本

Question

我正在寻找创建一个jQuery(或javascript)button来选择a中的所有内容textarea,然后clipboard在单击按钮时将文本复制到您的文本中.

我找到了一些使用焦点事件的例子.但我正在寻找一个按钮,你实际上必须点击选择和复制.

我该怎么做这项工作？

Answer 1

您需要使用select()选择文本textarea和用于execCommand('copy')处理选定的文本.它在上层版本的浏览器中工作.

$("button").click(function(){
    $("textarea").select();
    document.execCommand('copy');
});

你也可以在没有jquery的情况下完成这项工作,如下图所示

document.querySelector("button").onclick = function(){
  document.querySelector("textarea").select();
  document.execCommand('copy');
};

<button>Select</button>
<br/>
<textarea></textarea>

Answer 2

现代解决方案

document.execCommand('copy')现已弃用

相反，我们现在有剪贴板 API

您可以使用该writeText()属性来完成此操作：

$('button').on('click', () => {
  navigator.clipboard.writeText($('textarea').val()).then(
    () => {
      console.log('clipboard successfully set');
    },
    () => {
      console.error('clipboard write failed');
    }
  );
});

或者只是简单地：

$('button').on('click', () => {
  navigator.clipboard.writeText($('textarea').val());
});

奖励：这适用于禁用的文本区域，并且跨浏览器兼容

Answer 3

不使用jQuery就可以做到这一点.

这是一个纯粹的js解决方案.

function copy() {
  let textarea = document.getElementById("textarea");
  textarea.select();
  document.execCommand("copy");
}

<textarea id="textarea"></textarea>
<br>
<button onclick="copy()">Copy</button>