请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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>
这个例子还不完美:第一个分支如若执行失败,没有给出该分支的解决方案;第二个分支也同样存在复制失败的情形,例中甚至都没有去做这方面的预判。不过一般情况下,成功复制的比例会很高。
效果放在二楼。
|