JavaScript - 写文本到系统剪贴板，从系统剪贴板读文本

最新推荐文章于 2024-10-17 23:24:53 发布

Heismk

最新推荐文章于 2024-10-17 23:24:53 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/qq_29761395/article/details/120670568

版权

HTML & CSS & JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

本文介绍如何使用JavaScript操作谷歌浏览器的系统剪贴板，包括将文本内容写入和从剪贴板读取。通过`navigator.clipboard` API实例演示了`writeText`和`readText`方法的用法。

摘要由CSDN通过智能技术生成

示例

谷歌浏览器：版本 94.0.4606.71（正式版本）

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            textarea {
                width: 300px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <textarea id="textarea1"></textarea>
        <input type="button" id="write-to" value="Write To System Clipboard">
        <br>
        <textarea id="textarea2"></textarea>
        <input type="button" id="read-from" value="Read From System Clipboard">

        <script type="text/javascript">
            window.onload = function(event) {
                // console.log(event)
                main()
            }

            function main() {
                const textarea1 = document.querySelector("#textarea1")
                const textarea2 = document.querySelector("#textarea2")
                const buttonWrite = document.querySelector("#write-to")
                const buttonRead = document.querySelector("#read-from")

                buttonWrite.onclick = (event) => {
                    const content = textarea1.value
                    
                    // 写文本内容到系统剪贴板
                    navigator.clipboard.writeText(content).then(function() {
                        /* clipboard successfully set */
                    }, function(error) {
                        /* clipboard write failed */
                        console.log(error)
                    })
                }

                buttonRead.onclick = (event) => {
                    // 从系统剪贴板读文本内容
                    navigator.clipboard.readText().then((result) => {
                        console.log(result)
                        textarea2.value = result
                    })
                }
            }
        </script>
    </body>
</html>