How to hide the “Paste” menu on Safari browser when using navigator.clipboard.readText() in the button click handler?

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.

How to hide the “Paste” menu on Safari browser when using navigator.clipboard.readText() in the button click handler?
 
 
Q