博客

js 实现点击按钮复制文本

  • Post author:
  • Post category:其他

一、使用js实现

浏览器提供了 copy 命令 ，可以复制选中的内容

document.execCommand("copy")

如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用 copy 命令，将文本复制到剪切板

但是 select() 方法只对 和 有效，对于其他标签就不好使
二、代码实现

一、实现点击按钮，复制文本框中的的内容

   <div class="wrapper">
      <textarea id="input">这是幕后黑手</textarea>
      <button onclick="copyText()">copy</button>
   </div>      
   <script type="text/javascript">
       function copyText() {
         var input = document.getElementById("input");
         input.select(); // 选中文本
         document.execCommand("copy"); // 执行浏览器复制命令
         alert("复制成功");
       }
     </script>

二、直接复制 url

<input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">
<script language="javascript">
function copyUrl()
{
var clipBoardContent=this.location.href;
window.clipboardData.setData("Text",clipBoardContent);
alert("复制成功!");
}
</script>

二、使用clipboard.js实现(个人推荐)

为什么使用它

clipboard.js 是一个不需要flash，将文本复制到剪贴板的插件。兼容苹果10+以前的版本都可以实现复制功能。简单介绍下基本运用。
https://clipboardjs.com/

1 引入插件

在下载后只需要引入 ./dist/clipboard.min.js一个文件就可以放心使用

<script src="./dist/clipboard.min.js"></script>

2 使用插件

<body>
<input  id="foo" type="text" value="复制内容">
<button class="copy" data-clipboard-action="copy" data-clipboard-target="#foo">复制按键</button>
<script >
 	//实例化 ClipboardJS对象;
        var copyBtn = new ClipboardJS('.copyBtn');

        copyBtn.on("success",function(e){
            // 复制成功
            alert(e.text);
            e.clearSelection();
        });
        copyBtn.on("error",function(e){
            //复制失败；
            console.log( e.action )
        });
</script>
</body>

这里的ClipboardJS在实例化时， 如果报错：clipboard is not defined

解决办法就是如下：

new ClipboardJS(obj)
版权声明：本文为qq_43246449原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。