首页 > 解决方案 > 如何将剪贴板内容自动粘贴到我的网页中

问题描述

我想让客户端的剪贴板内容在他打开 URL 的那一刻自动粘贴到文本区域中。

我什至无法在点击时做到这一点,并且到处搜索都没有结果。这是我尝试过的版本之一:

<!DOCTYPE html>
<html>
    <body>

        <input type="textarea" id="demotext" value=" " size="40" />
        <button onclick="PasteFunction()">Paste text</button>

        <script>
function PasteFunction() {
  document.getElementById("demotext").innerHTML=window.clipboardData.getData('Text');
}
        </script>

    </body>
</html>

如果您知道我的最终目标的完整描述并且可以提出更聪明的替代方案,那可能会更好:

我想将 Excel 数据从客户端连接到我的 Web 应用程序,而无需用户手动粘贴数据。当剪贴板内容被手动粘贴到我的文本区域时,我的 Web 应用程序被触发。

Excel 加载项可以指导用户手动复制他的数据并访问我的 Web 应用程序的 URL,这部分很好。一旦他在那里,数据将被自动粘贴,Web 应用程序将启动。如果使用服务器端有一个更简单的解决方案,我可以考虑并且我正在使用 Flask,但我不希望将用户数据带到服务器。

标签: javascripthtmlflaskclipboarddata

解决方案


您可以使用剪贴板 API

您可以通过 Navigator.clipboard 全局访问系统剪贴板,而不是通过实例化创建剪贴板对象:

navigator.clipboard.readText().then(
    clipText => document.querySelector(".editor").innerText += clipText);

推荐阅读