请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-2-24 17:13 编辑
过去，实现文本复制到剪贴板不是很难，使用 execCommand 命令就可以。可惜 execCommand 已被宣判死刑，不过浏览器仍然还在支持它，很多前端封装其实也还在使用它。
execCommand 暂时不能抛弃，这不意味着我们可以不使用 navigator.clipboard 对象。navigator.clipboard 对象是浏览器操作剪贴板的API，它需要 https 协议的支持，一些浏览器还需要许可。因此，navigator.clipboard 提供的相关指令虽然简单，实际应用中却很复杂。以下例子做了两个分支：如果 navigator.clipboard 对象存在，则使用 navigator.clipboard.writeText(text) 方法将文本写入剪贴板，它可能会碰上错误，若此，俘获错误代码并打印出来；否则，若 navigator.clipboard 对象不存在，则使用传统的 execCommand 的 copy 命令来完成复制工作。execCommand 也不是省油的灯，它需要从可编辑的容器中得到选中的文本，为此得临时创建一个 textarea 多行文本控件，把文本传输给它并让它全部选中，然后再执行 execCommand 的 copy 命令，最后还应该将 textarea 控件销毁。
<div id="mydiv">点我复制</div>
<script>
mydiv.onclick = () => {
let str = '花开堪折直须折，莫待无花空折枝。';
if (navigator.clipboard) {
navigator.clipboard
.writeText(str)
.then (() => {
mydiv.innerText = '成功复制到剪切板！';
})
.catch(err => {
console.log(err);
})
} else {
let tbox = document.createElement('textarea');
tbox.value = str;
tbox.display = 'none';
document.body.appendChild(tbox);
tbox.focus;
tbox.select();
document.execCommand('copy');
mydiv.innerText = '复制好了！';
tbox.remove();
}
};
</script>
这个例子还不完美：第一个分支如若执行失败，没有给出该分支的解决方案；第二个分支也同样存在复制失败的情形，例中甚至都没有去做这方面的预判。不过一般情况下，成功复制的比例会很高。
效果放在二楼。
| 
发表于 2024-2-24 11:26
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-2-24 18:42
发表于 2024-2-24 20:00
