论坛 › 马黑黑教程专版 › 测试：navigator clipboard

马黑黑 发表于 2024-2-24 11:26

测试：navigator clipboard

本帖最后由 马黑黑 于 2024-2-24 17:13 编辑 <br /><br /><p>过去，实现文本复制到剪贴板不是很难，使用 execCommand 命令就可以。可惜 execCommand 已被宣判死刑，不过浏览器仍然还在支持它，很多前端封装其实也还在使用它。<br><br></p>
<p>execCommand 暂时不能抛弃，这不意味着我们可以不使用 navigator.clipboard 对象。navigator.clipboard 对象是浏览器操作剪贴板的API，它需要 https 协议的支持，一些浏览器还需要许可。因此，navigator.clipboard 提供的相关指令虽然简单，实际应用中却很复杂。以下例子做了两个分支：如果 navigator.clipboard 对象存在，则使用 navigator.clipboard.writeText(text) 方法将文本写入剪贴板，它可能会碰上错误，若此，俘获错误代码并打印出来；否则，若 navigator.clipboard 对象不存在，则使用传统的 execCommand 的 copy 命令来完成复制工作。execCommand 也不是省油的灯，它需要从可编辑的容器中得到选中的文本，为此得临时创建一个 textarea 多行文本控件，把文本传输给它并让它全部选中，然后再执行 execCommand 的 copy 命令，最后还应该将 textarea 控件销毁。<br><br></p>

<div class="mum"><pre>
&lt;div id="mydiv"&gt;点我复制&lt;/div&gt;

&lt;script&gt;

mydiv.onclick = () =&gt; {
        let str = '花开堪折直须折，莫待无花空折枝。';
        if (navigator.clipboard) {
                navigator.clipboard
                        .writeText(str)
                        .then (() =&gt; {
                                mydiv.innerText = '成功复制到剪切板！';
                        })
                        .catch(err =&gt; {
                                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();
        }
};

&lt;/script&gt;
</pre></div>
<p><br><br>这个例子还不完美：第一个分支如若执行失败，没有给出该分支的解决方案；第二个分支也同样存在复制失败的情形，例中甚至都没有去做这方面的预判。不过一般情况下，成功复制的比例会很高。<br><br></p>
<p>效果放在二楼。</p>

<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/colorcode.js';
document.querySelector('body').appendChild(sF);
</script>

马黑黑 发表于 2024-2-24 12:00

本帖最后由 马黑黑 于 2024-2-24 17:12 编辑 <br /><br /><p>演示效果：<br><br></p>

<div id="mydiv" style="margin-bottom: 400px; color: red; use-select: none; cursor: pointer;">点我复制</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 12:25

Hellow Navigator Clipboard!

红影 发表于 2024-2-24 12:34

Hellow Navigator Clipboard! 点一下真的能复制下面的内容呢{:4_187:}

马黑黑 发表于 2024-2-24 12:36

红影 发表于 2024-2-24 12:34
Hellow Navigator Clipboard! 点一下真的能复制下面的内容呢

不是复制下面的内容，是复制一楼程序中指定的内容

红影 发表于 2024-2-24 15:12

马黑黑 发表于 2024-2-24 12:00
navigator.clipboard 对象允许我们在web交互时操作系统的剪贴板，因为读写剪贴板可能涉及到安全与隐私问题 ...

原来还能看出是不是安全网站啊{:4_187:}

红影 发表于 2024-2-24 16:00

马黑黑 发表于 2024-2-24 12:36
不是复制下面的内容，是复制一楼程序中指定的内容

哦哦，原来这个是被指定的{:4_173:}

南无月 发表于 2024-2-24 18:42

花开堪折直须折，莫待无花空折枝。

醉美水芙蓉 发表于 2024-2-24 20:00

千羽 发表于 2024-2-24 20:22

黑黑老师，俺来围观下{:4_187:}

马黑黑 发表于 2024-2-24 20:41

南无月 发表于 2024-2-24 18:42
花开堪折直须折，莫待无花空折枝。

{:4_172:}

马黑黑 发表于 2024-2-24 20:41

醉美水芙蓉 发表于 2024-2-24 20:00
花开堪折直须折，莫待无花空折枝。

{:4_190:}

马黑黑 发表于 2024-2-24 20:42

千羽 发表于 2024-2-24 20:22
黑黑老师，俺来围观下

{:4_180:}

南无月 发表于 2024-2-24 20:55

马黑黑 发表于 2024-2-24 20:41


复制成功啦。

马黑黑 发表于 2024-2-24 20:56

南无月 发表于 2024-2-24 20:55
复制成功啦。

你把代码放到你网站的几个在线程序弄，也成功，注意看 mydiv 的提示语

南无月 发表于 2024-2-24 21:09

马黑黑 发表于 2024-2-24 20:56
你把代码放到你网站的几个在线程序弄，也成功，注意看 mydiv 的提示语

好哒，我一会儿灌完水试试

马黑黑 发表于 2024-2-24 21:14

南无月 发表于 2024-2-24 21:09
好哒，我一会儿灌完水试试

提示语是不同的

南无月 发表于 2024-2-24 21:34

马黑黑 发表于 2024-2-24 21:14
提示语是不同的

看到如下提示语：
点我复制！——成功复制到剪切板！——复制好了！——找块自留地粘贴吧！——黑神你好厉害呀！

马黑黑 发表于 2024-2-25 11:42

南无月 发表于 2024-2-24 21:34
看到如下提示语：
点我复制！——成功复制到剪切板！——复制好了！——找块自留地粘贴吧！——黑神你好 ...

有空去瞧瞧我的网站，新发布了帖子代码在线着色，就用的这个复制功能，复制到的代码不再依赖JS，发布源码也不再使用JS，直接发布好了

南无月 发表于 2024-2-25 18:05

马黑黑 发表于 2024-2-25 11:42
有空去瞧瞧我的网站，新发布了帖子代码在线着色，就用的这个复制功能，复制到的代码不再依赖JS，发布源码 ...

试了一下，真心好用。。
不用特意保存那篇变色代码，特别是不用去到别的程序里转义尖括号。。。
这个小程序完全是傻瓜式相机和智能手机随便划拉都没问题的操作方式。。{:4_173:}

查看完整版本: 测试：navigator clipboard