JavaScript如何点击实现复制文字到剪切板

Question

如题所述

Answer 1

可以使用clipboard插件解决这个问题。

github里直接搜索clipboard就可以找到了。

该插件并不依赖jquery。直接引入即可使用。

使用方法：

<input id="foo" value="被复制的内容">
<button class="btn" data-clipboard-target="#foo">点击复制</button>new Clipboard('.btn');

这里的.btn是元素的class属性，可以使用任意id或者class以及元素节点名称来实例化插件。

默认会为元素绑定click事件，点击的时候会触发。

data-clipboard-target参数指定被复制内容的元素。

如上例，点击按钮后会将input的值“被复制的内容”几个字复制到剪切板中。

更多使用方法可以自行github查询。

Answer 2

可以使用clipboard插件解决这个问题。

github里直接搜索clipboard就可以找到了。

该插件并不依赖jquery。直接引入即可使用。

使用方法：

这里的.btn是元素的class属性，可以使用任意id或者class以及元素节点名称来实例化插件。

默认会为元素绑定click事件，点击的时候会触发。

data-clipboard-target参数指定被复制内容的元素。

如上例，点击按钮后会将input的值“被复制的内容”几个字复制到剪切板中。

更多使用方法可以自行github查询。

本回答被网友采纳

Answer 3

<script type="text/javascript">    
    function copyText(obj){    
        try{    
          var rng = document.body.createTextRange();    
           rng.moveToElementText(obj);    
           rng.scrollIntoView();    
           rng.select();    
           rng.execCommand("Copy");    
           rng.collapse(false);    
           alert("已经复制到粘贴板!你可以使用Ctrl+V 贴到需要的地方去了哦!");    
       }catch(e){    
          alert("您的浏览器不支持此复制功能，请选中相应内容并使用Ctrl+C进行复制!");    
        }    
     }    
   </script>    
<span id="tbid">这里是点击链接后复制的内容</span> <a href="javascript:;"onclick="copyText(document.all.tbid)">点击复制</a>