HTML原生js无提示复制文本的最简单实现
2022-04-01
网页中复制一些文本到剪切板是一个前端开发中经常用到的功能，但是目前浏览器对JavaScript权限上的限制越来越多，许多之前提供的API接口失效了，其中就包括有直接复制文本的接口。
但是目前看来，我们可以通过建立一个虚拟元素再模拟用户复制事件的造作来绕开浏览器限制，达成目的。
（为直观展示核心内容，没有遵照HTML格式书写）
<script>
function copyToClipboard(text) {
let a = document.createElement("input");
a.value = text
document.body.appendChild(a);
a.select();
document.execCommand("copy");
a.remove();
}
</script>
<p onclick="copyToClipboard('Hello World!')">复制</p>原理如下：
- 创建一个新input元素
- 将其value设置为想要复制的文本
- 添加到文档流中
- 模拟用户发送复制操作
- 删除添加的内容
浏览器的DOM更新还是有一定延迟的，由于3-5的过程很快，因此浏览器事实上不会在文档中渲染添加的input标签元素，因此不会降低用户的体验
当然这个过程测试时最好加上try，还知道究竟成功没有；在生产环境可以防止不必要的js运行终止
<script>
function copyToClipboard(text) {
let a = document.createElement("input");
a.value = text
document.body.appendChild(a);
a.select();
try {
document.execCommand("copy");
alert("复制成功！");
} catch (e) {
alert("复制链接失败！");
}
a.remove();
}
</script>
<p onclick="copyToClipboard('Hello World!')">复制</p>实际测试时，还是有部分手机浏览器对此行为弹出了风险提示，不过都仅仅是提醒并没有拦截。