如何在Safari中点击按钮调用navigator.clipboard.readText()时隐藏粘贴菜单

我尝试在按钮点击事件中用navigator.clipboard.readText()读取剪贴板内容，代码如下：

<body>
    <h1>How to paste text</h1>
    <p><button type=button>Paste</button></p><textarea></textarea>
    <script>
        const pasteButton = document.querySelector("button");
        pasteButton.addEventListener("click", (async () => {
            try {
                const e = await navigator.clipboard.readText();
                document.querySelector("textarea").value += e;
                console.log("Text pasted.")
            }
            catch (e) {
                console.log("Failed to read clipboard. Using execCommand instead.");
                document.querySelector("textarea").focus();
                const t = document.execCommand("paste");
                console.log("document.execCommand result: ", t)
            }
        }));
    </script>
</body>

这段代码在Chrome中点击按钮可以直接粘贴剪贴板内容，但在Safari中点击按钮会弹出系统默认的“Paste”菜单，必须点击该菜单才能完成粘贴。我需要实现点击按钮后直接读取剪贴板并隐藏这个默认菜单。

原因分析 #

Safari对剪贴板API的安全限制更为严格：在用户触发的交互（如按钮点击）中调用navigator.clipboard.readText()时，浏览器会强制弹出系统级的确认菜单，这是原生安全机制，无法直接通过API禁用，但可以通过事件拦截的方式绕过。

解决方案：利用paste事件结合按钮交互 #

核心思路是：先让目标文本框获得焦点，在按钮点击时触发文本框的paste事件，再在该事件中读取剪贴板数据并阻止默认行为（从而隐藏菜单）。

修改后的代码如下：

<body>
    <h1>How to paste text</h1>
    <p><button type=button>Paste</button></p><textarea></textarea>
    <script>
        const pasteButton = document.querySelector("button");
        const textarea = document.querySelector("textarea");

        // 监听文本框的paste事件，拦截默认行为并读取剪贴板
        textarea.addEventListener('paste', async (e) => {
            e.preventDefault(); // 阻止默认粘贴行为和菜单弹出
            try {
                const clipboardText = await navigator.clipboard.readText();
                textarea.value += clipboardText;
                console.log("Text pasted.");
            } catch (err) {
                console.error("Failed to read clipboard:", err);
                // 降级处理：使用剪贴板事件自带的数据
                const pastedText = e.clipboardData?.getData('text') || '';
                textarea.value += pastedText;
            }
        });

        // 按钮点击逻辑：聚焦文本框并触发paste事件
        pasteButton.addEventListener("click", () => {
            textarea.focus();
            // 创建并触发paste事件
            const pasteEvent = new ClipboardEvent('paste', {
                clipboardData: new DataTransfer()
            });
            textarea.dispatchEvent(pasteEvent);
        });
    </script>
</body>

关键说明 #

• e.preventDefault()是核心：在paste事件中调用它可以直接阻止Safari弹出默认的Paste菜单
• 按钮点击时先让文本框聚焦，确保paste事件能在正确的上下文触发
• 保留了降级逻辑，在现代剪贴板API不可用时，使用事件自带的clipboardData读取数据

备选方案：使用document.execCommand('paste')（不推荐） #

如果不需要依赖现代剪贴板API，可以直接在按钮点击时聚焦文本框并调用execCommand('paste')，这种方式在Safari中不会弹出菜单：

pasteButton.addEventListener("click", () => {
    textarea.focus();
    try {
        const success = document.execCommand('paste');
        console.log("Paste via execCommand:", success);
    } catch (err) {
        console.error("ExecCommand failed:", err);
    }
});

注意：execCommand已被标记为废弃API，未来可能被浏览器移除，建议优先使用第一种方案。

内容的提问来源于stack exchange，提问作者Andrey Khramov