Copying text to the clipboard using the Clipboard API mainly depends on 1. Call the navigator.clipboard.writeText() method to pass in the text to be copied; 2. It is recommended to trigger it in user interaction (such as button clicks) to comply with the browser security policy; 3. You must add .then() and .catch() to handle successful or failed situations to avoid silent errors; 4. Note that this API does not support HTTP pages, and you must ensure the HTTPS environment and user authorization; 5. It is recommended to replace the abandoned document.execCommand('copy') solution.

Directly answer the title question: Use the Clipboard API to copy text to the clipboard, mainly relying on navigator.clipboard.writeText() method, which is simple and efficient.

Basic usage: call writeText() method

To copy a paragraph of text, just one line of code is required:

 navigator.clipboard.writeText("The text you want to copy");

This method returns a Promise, which can be added with .then() and .catch() to handle success or failure. for example:

 navigator.clipboard.writeText("Hello, world!")
  .then(() => {
    console.log("Copy successfully");
  })
  .catch(err => {
    console.error("Copy failed: ", err);
  });

Note: This API needs to be triggered in user active actions (such as clicking buttons), otherwise it may be blocked due to browser security policies.

User interaction triggers more securely

Most browsers require that copy operations must be triggered by user actions (such as clicks, touches). So it is recommended to bind the copy function to the button:

 <button onclick="copyText()">Copy text</button>

<script>
function copyText() {
  navigator.clipboard.writeText("This is a sample text")
    .then(() => alert("Copyed!"))
    .catch(err => console.error("Error:", err));
}
</script>

This not only conforms to the browser's security mechanism, but also improves the user experience.

Don't ignore exception handling

Although copying may seem simple, errors may occur, such as a user not authorized to access the clipboard, or executed in a non-secure context (such as an HTTP page). At this time .catch() comes in handy:

Common causes of errors include:

• The page is not provided via HTTPS
• Not in events triggered by user gestures
• User denied access to clipboard

Therefore, it is recommended to always add error handling logic to avoid silence failure.

Alternative: document.execCommand('copy') is outdated

You may see some old code using execCommand('copy') , but this method has been abandoned, and it is recommended to use the modern Clipboard API instead. The new API is simpler and safer, and does not require the creation of temporary textarea elements to assist in replication.

Basically that's it. It is not complicated to implement, but pay attention to browser compatibility and user interaction restrictions.

The above is the detailed content of How to copy text to the clipboard using the Clipboard API?. For more information, please follow other related articles on the PHP Chinese website!