首先需要定义一个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);
});