H5点击复制到粘贴板

功能场景

h5页面需要点击复制内容，到手机的粘贴板。

运用插件clipboard

插件下载地址：clipboard官网

插件使用

//html部分

点我复制

//js部分
function copymsg() {
var Url2 = document.getElementById("title1");//要复制文字的节点
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分iPhone设备
window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
var range = document.createRange();
// 选中需要复制的节点
range.selectNode(Url2);
// 执行选中元素
window.getSelection().addRange(range);
// 执行 copy 操作
var successful = document.execCommand('copy');

// 移除选中的元素
window.getSelection().removeAllRanges();
} else {
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
}
}
$(".btn").click(function() {
copymsg();
});

注意事项

这里的input可以换成div但是写法会有所区别，详细见官网介绍。
个人建议用input，因为这个兼容性最好。还有input标签内容不能opacity:0,也不能display:none;它必须在页面中显示。
我的做法是，让它字体颜色、input背景颜色都与页面背景色一致。这样就能解决这个兼容问题了。