JS复制文本到剪切板的问题

马黑黑

JS有一个内置指令，navigator.clipboard.writeText(text)，可以将指定文本复制到系统的剪切板。navigator 原意之一是浏览器，在JS里是一个独立的与浏览器有关的对象，clipboard 是剪切板，writetext，写入文本，text参数就是待写入的文本对象。

例如我们要将 id="mytext" 的 div 元素的文本内容写入剪切板：

mytext.onclick = () => navigator.clipboard.writeText(mytext.innerText);

还是比较简单的。但有一个问题：现代浏览器引入了很多安全机制，其中之一是，http: 开头的域名被视为不安全，https: 开头的域名才是安全的。故而，在 http: 域名的站点，上面的复制指定文本到剪切板的做法会报错，复制失败。

一般来说，企图绕过安全机制实现正常复制的想法是徒然的，即便可以，消耗也是巨大的，所以解决问题的思路，比较干脆的是，换一种方式：将文本置于 text 类别的元素，如 input type=“text” 或 textArea 都可以（textArea可以支持更大文本的复制），然后使用 execCommand 指令对选中文本进行copy。我们以 input 为例，可以在JS中动态生成，也可以用 HTML 创建（本帖所举栗子使用此法），设置其不可见：

<input id="icopy" type="text" value="" style="position: absolute; opacity: 0;" />

之所以设置绝对定位，是想令其不影响自然文档流中其他元素的正常占位，opacity设置为0，完全透明，不可见。它有一个 id，这是我们操作它的依据。我们写一个复制函数，以便能反复调用：

//复制指定元素的文本内容
// ele 参数是要复制其上文本的元素
function copyText(ele) {
        icopy.value = ele.innerText;  //将元素的文本传递给 icopy文本框
        icopy.select(); //文本框全选
        document.execCommand('copy'); //执行 execCommand 指令，执行参数是 copy（复制）
        icopy.value = '复制成功'; // icopy文本框的内容转为提示语
        icopy.blur(); //不让文本框有焦点（不然提示语出现会出现输入光标）
        icopy.style.opacity = '1'; //icopy文本框变为可见
        icopy.style.left = ele.offsetLeft + 40 + 'px'; //设置文本框left位置：参照被复制内容的对象元素的left值
        icopy.style.top = ele.offsetTop + 'px'; //设置文本框top位置：参照被复制内容的对象元素的top值
        setTimeout('icopy.style.opacity = "0"', 1000); //设定定时器，令文本框一秒钟后消失
}


然后，给指定元素（例如前面提到的 id="mytext" 的 div）一个单击事件，调用上面的函数：

mytext.onclick = () => copyText(mytext);

效果请到下面的链接查看：

HSL色盘配置工具 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

红影

这个是讲的对于HTTP域名的吧，花潮的是HTTPS，就可以直接将文本写入剪切板了

红影

跟着链接去看了
hslColor.onclick = () => navigator.clipboard.writeText(hslColor.innerText);
rgbColor.onclick = () => navigator.clipboard.writeText(rgbColor.innerText);
这两句就是直接写的吧。

红影

讲得这么详细，黑黑辛苦了

马黑黑

红影 发表于 2022-10-2 10:26
这个是讲的对于HTTP域名的吧，花潮的是HTTPS，就可以直接将文本写入剪切板了

花超可以。凡 https: 域名的基本上都可以

马黑黑

红影 发表于 2022-10-2 10:28
讲得这么详细，黑黑辛苦了

马黑黑

红影 发表于 2022-10-2 10:27
跟着链接去看了
hslColor.onclick = () => navigator.clipboard.writeText(hslColor.innerText);
rgbColo ...

这是修改前的写法，现在统一用借道的方法，顺便让 input 模拟一下弹出提示

红影

马黑黑 发表于 2022-10-2 13:08
花超可以。凡 https: 域名的基本上都可以

忽然觉得挺自豪，没白升级

红影

马黑黑 发表于 2022-10-2 13:10
这是修改前的写法，现在统一用借道的方法，顺便让 input 模拟一下弹出提示

反正你方法多，可以潇洒挥洒

马黑黑

红影 发表于 2022-10-2 16:04
反正你方法多，可以潇洒挥洒

原理点复制没有交互，顺便就改改

马黑黑

红影 发表于 2022-10-2 16:03
忽然觉得挺自豪，没白升级

这是大势所趋呀，新时代浏览器注重安全

红影

马黑黑 发表于 2022-10-2 16:53
原理点复制没有交互，顺便就改改

黑黑很认真细致

红影

马黑黑 发表于 2022-10-2 16:54
这是大势所趋呀，新时代浏览器注重安全

是的，正是这个原因才升级的。

马黑黑

红影 发表于 2022-10-2 20:19
黑黑很认真细致

嗯，粗枝大叶的

马黑黑

红影 发表于 2022-10-2 20:20
是的，正是这个原因才升级的。

红影

马黑黑 发表于 2022-10-2 20:20
嗯，粗枝大叶的

没有啊，黑黑很细心的

马黑黑

红影 发表于 2022-10-2 22:22
没有啊，黑黑很细心的

不见得的，我知道我自己

红影

马黑黑 发表于 2022-10-2 22:23
不见得的，我知道我自己

偶尔的一次两次不算什么的，人不是神，这有什么啊。

马黑黑

红影 发表于 2022-10-3 11:27
偶尔的一次两次不算什么的，人不是神，这有什么啊。

有的有的。人之所以不是神，是因为人没把握好自己，乱跳坑

红影

马黑黑 发表于 2022-10-3 11:28
有的有的。人之所以不是神，是因为人没把握好自己，乱跳坑

你的意思，只要不掉坑，就可以是神人了？