jquery 单击按钮时复制剪贴板中文本区域的文本

gdx19jrr  于 2022-11-22  发布在  jQuery
关注(0)|答案(5)|浏览(166)

我正在寻找创建一个jQuery(或javascript)button,它选择textarea中的所有内容,然后在您单击按钮时将文本复制到您的clipboard
我已经找到了一些使用焦点事件的例子,但是我正在寻找一个按钮,你实际上必须点击它来选择和复制。
我怎样才能做好这项工作呢?

j91ykkif

j91ykkif1#

你需要使用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');
}

第一次

pvabu6sv

pvabu6sv2#

不使用jQuery也可以做到这一点。
下面是一个纯js的解决方案。
第一个

a6b3iqyw

a6b3iqyw3#

当您的textarea元素由于某种原因被禁用时,或者如果您不想对所选文本进行视觉效果处理,那么下面的解决方案将非常适合您。

$("#button_id").click(function(){
    var $temp = $("<textarea></textarea>");
    $("body").append($temp);
    $temp.val($("#textarea_source").val()).select();     <-- #textarea_source: id of textarea source to be copied to the clipboard
    document.execCommand("copy");
    $temp.remove();
})
kokeuurv

kokeuurv4#

**Copying text of textarea**
<textarea id="text" class="form-control" rows="21" cols="40" name="text">
                This word has two main meanings. The first has to do with being pleased and satisfied (feeling content) or making someone else feel happy and at peace with things (contenting them). The other meaning has to do with subject matter: the content of a history class might be American history. The content of a math class might be geometry. As long as there's a topic or subject, there's content.
</textarea>
**The following code added to script area**
$("button").click(function(){
      $("textarea").select();
      document.execCommand('copy');
      });
u3r8eeie

u3r8eeie5#

现代解决方案

document.execCommand('copy')现在是deprecated
现在我们有了Clipboard 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());
});

额外好处:此功能适用于禁用的文本区域,并且跨浏览器兼容

相关问题