使用clipboard.js 实现复制隐藏文本的内容

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

document.execCommand("copy")

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

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

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

二、clipboard.js

拷贝文字不应当是一件困难的事. 不需要过多繁杂的配置或者下载很多脚本文件. 最重要的，它不应该依赖flash或者其他框架，应该保持简洁

这就是创造clipboard.js的原因和目的

<input type="hidden" id="cardmal" value="11sss1111">
<a href="javascript:;" class="copybng">复制</a>
<script>
var clipboard  = new Clipboard('.copybng', {
    text: function() {
        return $("#cardmal").val();
    }
});
clipboard .on('success', function(e) {
    alert('已复制到剪贴板')
})
</script>

附件下载：

链接：https://pan.baidu.com/s/1LNNmA5KAwI3S1K31oLDo7Q

提取码：iigd