核心提示：我们这次会利用的神器有clipboard.js,但它对ios设备支持不太友好，所以我们ios部分用纯js实现兼容这次我实现的效果的是直接点击文字复制，你们也可以根据自己的需求和clipboard.js...
我们这次会利用的神器有clipboard.js,但它对ios设备支持不太友好，所以我们ios部分用纯js实现兼容
这次我实现的效果的是直接点击文字复制，你们也可以根据自己的需求和clipboard.js的API是实现例如
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
</head>
<body>
<!-- data-clipboard-text里面的内容就是所要复制的内容 -->
<p id="foo" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</p>
<script>
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //ios用纯js实现
$("#foo").click(function () {
var copyDOM = document.querySelector('#foo'); //要复制文字的节点
var range = document.createRange();
// 选中需要复制的节点
range.selectNode(copyDOM);
// 执行选中元素
window.getSelection().addRange(range);
// 执行 copy 操作
var successful = document.execCommand('copy');
try {
var msg = successful ? 'successful' : 'unsuccessful';
alert('复制成功');
console.log('copy is' + msg);
} catch (err) {
console.log('Oops, unable to copy');
alert('复制失败');
}
// 移除选中的元素
window.getSelection().removeAllRanges();
});
} else {//安卓或PC用clipboard.js实现
var clipboard = new Clipboard('#foo');
clipboard.on('success', function (e) {
alert('复制成功');
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function (e) {
alert('请选择“拷贝”进行复制!');
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
}
</script>
</body>
</html>
把上面的代码直接复制下来即可使用
