Web应用实现读取写入剪贴板功能几种方式

Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，其就能提供系统剪贴板的读写访问能力。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。

参考: https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard

Clipboard API 包括两个主要的接口：Clipboard 和 DataTransfer。Clipboard 接口用于操作系统剪贴板（例如 Windows 或 macOS 中的剪贴板），它包含以下方法：

writeText(text: string): Promise：将文本复制到剪贴板。
readText():Promise：从剪贴板读取文本。

以下示例可直接使用，亲测有效

1、以下是一个使用 Clipboard 接口将文本剪贴板复制粘贴的示例：更多参考

<script>
　　// 将文本复制到剪贴板
　　navigator.clipboard
　　　　.writeText("Hello, World! Write")
　　　　.then(() => console.log("Text copied to clipboard"))
　　　　.catch((error) => console.error("Failed to copy text: ", error));

　　// 从剪贴板中读取数据
　　navigator.clipboard
　　　　.readText()
　　　　.then((text) => console.log("Text read from clipboard: ", text))
　　　　.catch((error) => console.error("Failed to read text from clipboard: ", error) );
</script>

2、实例Clipboard对象，使用html标签 data-clipboard-target ，需要点击触发。

<script type=\'text/javascript\' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>

<div id="foo">独孤那点事儿</div>

<a class="btn"  href="javascript:" data-clipboard-target="#foo" rel="noopener noreferrer">复制</a>

<script type="text/javascript">
    var clipboard = new Clipboard(\'.btn\');

    clipboard.on(\'success\', function(e) {
       console.info(\'Success---:\', e);
       e.clearSelection();
    });

    clipboard.on(\'error\', function(e) {
       console.error(\'Error---:\', e.action);
    });
</script>

<script type="text/javascript">
　　function copyText()
    {
        var text = document.getElementById("mytext").innerText;
        var einput = document.createElement(\'input\');
        einput.value = text;
        document.body.appendChild(einput);
        einput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        einput.className = \'einput\';
        document.body.removeChild(einput);
        alert(\'复制成功\');
    }
</script>
<div cols="20" id="mytext">I am text： 12345678</div>
<input type="button" onClick="copyText()" value="点击复制代码" />

无感触发复制粘贴效果: 创建一个textarea元素，将要写入的内容放入textarea里，然后选择input，再调用浏览器的复制命令，将textarea里的内容复制，最后隐藏或移除textarea。

<script>
      var text = \'ΦX-9hAf2vYA7jBEdcΦ\';

      if (navigator.clipboard) { // clipboard api 复制 (安全域名下使用)
          navigator.clipboard.writeText(text);

      } else { // (不安全域名下使用)
          var textarea = document.createElement(\'textarea\');
          document.body.appendChild(textarea);
          // 隐藏此输入框
          textarea.style.position = \'fixed\';
          textarea.style.clip = \'rect(0 0 0 0)\';
          textarea.style.top = \'10px\';
          // 赋值
          textarea.value = text;
          // 选中
          textarea.select();

          // 复制
          document.execCommand(\'copy\', true);
          // 移除输入框
          document.body.removeChild(textarea);
      }
    </script>

注:
1、调用 navigator.clipboard 的 API 必须是 https安全协议访问，否则浏览器将不会暴露出该 API 调用时会报错失败，其次如果想访问剪切板的内容的话，需要两个条件: 第一必须是活动界面也就是说如果你切换到其他界面时，在访问原本界面的剪切板信息将不会执行;第二必须用户开启访问剪切板权限，否则不给访问。结合这些用户操作的安全性也得到了大大地提升~
2、报错 DOMException: Document is not focused.这是浏览器的安全控制，需要用户主动触发;

已有 7 条评论

order medicine online March 18th, 2025 at 04:47 am 回复

Hello to all, it's really a good for me to pay
a visit this site, it consists of important Information.
canada pharmaceuticals online February 23rd, 2025 at 05:33 am 回复

I'm not sure where you are getting your information, but good topic.
I needs to spend some time learning much more or understanding more.
Thanks for excellent information I was looking for this info for my mission.
canadian pharcharmy February 22nd, 2025 at 08:48 pm 回复

Appreciation to my father who shared with me on the topic of this blog, this weblog
is really remarkable.
medicine online shopping February 15th, 2025 at 10:27 pm 回复

When some one searches for his necessary thing, therefore he/she wishes to be available
that in detail, therefore that thing is maintained over here.
canadian pharmacy online February 9th, 2025 at 12:53 pm 回复

I have learn a few good stuff here. Certainly price bookmarking for revisiting.
I surprise how so much effort you place to make this type
of wonderful informative site.
canadian pharmacy online February 4th, 2025 at 11:34 am 回复

Spot on with this write-up, I seriously believe this
site needs a lot more attention. I'll probably be back
again to read more, thanks for the info!
international pharmacy January 14th, 2025 at 06:43 am 回复

Great web site you have here.. It's hard to find quality writing like yours these days.
I really appreciate people like you! Take care!!

我来吐槽

已有 7 条评论