JavaScript复制内容到剪贴板

移动端 需要复制内容到剪贴板时,

clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容,

完成一键复制淘口令的功能。

注意使用clipborad.js时,input 元素不可隐藏,可以设置元素位置在可视区域之外。

参考链接:

https://github.com/axuebin/articles/issues/26

实现代码:

<input id="taokouling"  value="€1222€">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#taokouling" >复制淘口令</button>
        document.querySelector('.btn').addEventListener('click', () => {

            var clipboard = new Clipboard('.btn');
clipboard.on('success', e => {
// alert(e.text)
$(".pop").fadeIn(500)
e.clearSelection();
})
clipboard.on('error', e => {
// 不支持复制
// alert('浏览器不支持自动复制,请手动复制微信号') var btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
var input = document.createElement('input');
input.setAttribute('readonly', 'readonly');
input.setAttribute('value', '€Up2jba6wlck€');
document.body.appendChild(input);
input.setSelectionRange(0, 9999);
if (document.execCommand('copy')) {
document.execCommand('copy');
$(".pop").fadeIn(500)
}
else{
alert('复制失败');
}
document.body.removeChild(input);
})
})
})
上一篇:Nodejs开源项目里怎么样写测试、CI和代码测试覆盖率


下一篇:Zclip点击复制内容到剪贴板兼容各浏览器