在 safari 中粘贴文本时获取工具提示

Question

我使用此页面中的相同代码https://web.dev/patterns/clipboard/paste-text/，按下它时会在 safari 中呈现工具提示，用户必须按下工具提示才能粘贴文本。而且它在 Firefox 中根本不起作用。有什么办法解决吗

const pasteButton = document.querySelector('#paste-btn');

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard. Using execCommand instead.');
     document.querySelector('textarea').focus();
     const result = document.execCommand('paste')
     console.log('document.execCommand result: ', result);
   }
});

#paste-btn {
  display: block;
  margin-bottom: 1rem;
}

<button id="paste-btn">Paste</button>
<textarea rows="5" cols="60"></textarea>

Answer 1

借助现代浏览器的安全性，访问剪贴板非常困难。浏览器中的剪贴板访问始终存在某种形式的限制。

用户可能会收到如下错误：

DOMException：由于应用于当前文档的权限策略，剪贴板 API 已被阻止。

通常网站会询问用户是否希望网站访问剪贴板。在 Chrome 上，这是通过多功能栏中的锁定图标弹出的窗口。

await navigator.clipboard.readText()

在 Safari 版本 13.1+ 中应该可以正常工作，但在 Firefox 中根本无法工作。您可以在这里检查兼容性：MDN：剪贴板：readText（）方法