码迷,mamicode.com
首页 > Web开发 > 详细

js实现复制隐藏域的内容 —— clipboard.js

时间:2019-03-21 11:50:39      阅读:582      评论:0      收藏:0      [点我收藏+]

标签:select   执行   .exe   调用   git   error   var   asc   command   

起初是使用浏览器提供了 copy 命令 。

document.execCommand("copy")

如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板。但是 select() 方法只对 <input> 和 <textarea> 有效,对于 <p> 就不好用了

 function copyUrl() {
     $("#copyinput").select();  // 选择对象  
     document.execCommand("Copy"); // 执行浏览器复制命令  
     alert("已复制到剪贴板!");
 }

但是#copyinput不能隐藏(display:none or  visibility:hidden or type="hidden"),我想要的是点击一个按钮就能复制隐藏控件的值。所以找到了clipboard.js 优秀!

以下是clipboard.js 的使用方法。

HTML:
<input type="hidden" id="content" value="复制的内容"/>
<input type="button" id="copyUrl" value="请点击我复制"/>

JS:
    var clipboard2 = new ClipboardJS(‘#copyUrl‘, {
        text: function() {
              return $("#content").val();
            }
    });
    clipboard2.on(‘success‘, function(e) {
    	  console.log("已复制到剪贴板!");
     });
    clipboard2.on(‘error‘, function (e) {
     });

兼容以下浏览器版本

技术图片

下载链接:https://github.com/zenorocha/clipboard.js

js实现复制隐藏域的内容 —— clipboard.js

标签:select   执行   .exe   调用   git   error   var   asc   command   

原文地址:https://www.cnblogs.com/formybestlife/p/10570514.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!