I'm trying to read the clipboard data using the navigator.clipboard.readText()
in the button click handler:
<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>
We can use the following link to check the demo page using the above code:
- https://web.dev/patterns/clipboard/paste-text/demo.html
The demo page works fine when clicking the Paste
button on the Chrome browser.
But, it shows the Paste
menu when clicking the Paste
button on the Safari browser.
Only when clicking the Paste
menu on the Safari browser, the clipboard data is pasted into the text box.
So, I'd like to know how to hide the "Paste" menu on Safari browser when using navigator.clipboard.readText()
in the button click handler.
Thanks.