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，就可以直接将文本写入剪切板了{:4_173:} 跟着链接去看了
hslColor.onclick = () => navigator.clipboard.writeText(hslColor.innerText);
rgbColor.onclick = () => navigator.clipboard.writeText(rgbColor.innerText);
这两句就是直接写的吧。 讲得这么详细，黑黑辛苦了{:4_187:} 红影 发表于 2022-10-2 10:26
这个是讲的对于HTTP域名的吧，花潮的是HTTPS，就可以直接将文本写入剪切板了
花超可以。凡 https: 域名的基本上都可以 红影 发表于 2022-10-2 10:28
讲得这么详细，黑黑辛苦了
{:5_102:} 红影 发表于 2022-10-2 10:27
跟着链接去看了
hslColor.onclick = () => navigator.clipboard.writeText(hslColor.innerText);
rgbColo ...
这是修改前的写法，现在统一用借道的方法，顺便让 input 模拟一下弹出提示 马黑黑 发表于 2022-10-2 13:08
花超可以。凡 https: 域名的基本上都可以
忽然觉得挺自豪，没白升级{:4_173:} 马黑黑 发表于 2022-10-2 13:10
这是修改前的写法，现在统一用借道的方法，顺便让 input 模拟一下弹出提示
反正你方法多，可以潇洒挥洒{:4_173:} 红影 发表于 2022-10-2 16:04
反正你方法多，可以潇洒挥洒
原理点复制没有交互，顺便就改改 红影 发表于 2022-10-2 16:03
忽然觉得挺自豪，没白升级
这是大势所趋呀，新时代浏览器注重安全 马黑黑 发表于 2022-10-2 16:53
原理点复制没有交互，顺便就改改
黑黑很认真细致{:4_204:} 马黑黑 发表于 2022-10-2 16:54
这是大势所趋呀，新时代浏览器注重安全
是的，正是这个原因才升级的。 红影 发表于 2022-10-2 20:19
黑黑很认真细致
嗯，粗枝大叶的 红影 发表于 2022-10-2 20:20
是的，正是这个原因才升级的。
{:4_181:} 马黑黑 发表于 2022-10-2 20:20
嗯，粗枝大叶的
没有啊，黑黑很细心的{:4_204:} 红影 发表于 2022-10-2 22:22
没有啊，黑黑很细心的
不见得的，我知道我自己 马黑黑 发表于 2022-10-2 22:23
不见得的，我知道我自己
偶尔的一次两次不算什么的，人不是神，这有什么啊。 红影 发表于 2022-10-3 11:27
偶尔的一次两次不算什么的，人不是神，这有什么啊。
有的有的。人之所以不是神，是因为人没把握好自己，乱跳坑 马黑黑 发表于 2022-10-3 11:28
有的有的。人之所以不是神，是因为人没把握好自己，乱跳坑
你的意思，只要不掉坑，就可以是神人了？