Can You Access the Clipboard Content Automatically on a Web Page?

How to Retrieve the Current Clipboard Content on a Web Page?

This question seeks a method to automatically retrieve the clipboard's content and insert it into a text field upon page load without user intervention.

To achieve this, the solution leverages the new Clipboard API accessible via navigator.clipboard. Here's how to implement it:

Using async/await syntax:

const text = await navigator.clipboard.readText();

Or using Promise syntax:

navigator.clipboard.readText()
.then(text => {
    console.log('Pasted content: ', text);
})
.catch(err => {
    console.error('Failed to read clipboard contents: ', err);
});

Note that this approach requires user permission, which is prompted via a dialog box. Additionally, it does not operate in Firefox version 109 or later.

To call the code from the console, set a timeout and quickly click in the target website window:

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

For more details on the API and its usage, refer to the Google developer documentation.

The above is the detailed content of Can You Access the Clipboard Content Automatically on a Web Page?. For more information, please follow other related articles on the PHP Chinese website!