html+js实现点击按钮复制文本内容到剪切板上

首先需要定义一个input框，如果你想实现的效果是，用户输入后，点击按钮，复制文本框的内容，那这种做法应该是很适合的。

在js中：

$(".copy-btn").click(function() { 
    var e = document.getElementById("wechat"); 
    e.select(); // 选择对象 
    document.execCommand("Copy"); // 执行浏览器复制命令 
})

 

首先获取input框对象，然后通过select()选择对象，会选中用户输入的值，即input中的value。

然后通过document.execCommand("Copy");执行复制命令，此时可以复制到用户输入的值。

 

但是我们要实现的效果是，点击按钮直接复制文本到粘贴板上。

因此需要多做两步，1.将值放在文本框中（value)；2.将文本框隐藏(opacity)；

注意：1）隐藏的时候如果使用display:none或者type=hidden都不可以，获取不到value。

2）在小程序中点击复制之后，复制成功后会调用起键盘，因此需要在input中加上readonly！

这样就可以啦。

PC端和安卓都可以，不过ios好像不可以，复制不到东西。

 

主要代码如下：

$(".copy-btn").click(function() { 
    var e = document.getElementById("wechat"); 
    e.select(); // 选择对象 
    document.execCommand("Copy"); // 执行浏览器复制命令 
    alert("复制成功");    
})