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

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

<input type="text" value="" id="wechat">

在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！

<input type="text" value="wechat111" id="wechat" style="opacity: 0" readonly>

这样就可以啦。

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

 

主要代码如下：

<input type="text" value="wechat111" id="wechat" style="opacity: 0" readonly>

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

 

 

——————————更新——————————

发现一个棒棒的插件，官网：http://www.clipboardjs.cn/

使用它可以在移动端webview上完美解决这个问题

首先，引入js文件：

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

然后，主要代码如下：

<button id="copy-wechat-btn" data-clipboard-text="wx-number">复制微信号</button>

var btns = document.getElementById('copy-wechat-btn');
var clipboard = new ClipboardJS(btns);
clipboard.on('success', function(e) {
    //成功后执行这里
});
clipboard.on('error', function(e) {
   console.log(e);
});