The artifact we will use this time is clipboard.js , but it is not very friendly to ios device support, so we use pure js to achieve compatibility in the ios
part . The effect I achieved this time is to directly click the text to copy, you can also copy it according to your own Requirement and API of clipboard.js is to implement e.g. click button to copy text
<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>Copy the above code directly to use