Menu
Bounties /Pin to ProfileBookmark
@jSiFeb 10.2023 — #Check out Clipboard API:
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
As of writing Clipboard API is supported in most modern browsers (Chrome, Firefox, Edge, etc.) but not Internet Explorer.
Another alternative could be the library
https://clipboardjs.com/
@OnlineDevelopersFeb 12.2023 — #async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('Text copied to clipboard');
} catch (err) {
console.error('Failed to copy text: ', err);
}
}
In this example, navigator.clipboard.writeText is used to write the specified text to the clipboard. Note that the Clipboard API is asynchronous, so you need to use await when calling writeText. Additionally, the Clipboard API requires the user's permission, so you may need to add logic to request permission if it has not yet been granted.
If you need to support older browsers that don't have the Clipboard API, you can use a combination of the createElement and execCommand methods to create a temporary textarea element and copy its contents to the clipboard. Here's an example:
function copyToClipboard(text) {
var textarea = document.createElement("textarea");
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
}
@steimeFeb 12.2023 — #As of 2021, the execCommand method of the document object has been deprecated and is not recommended for use in new projects. A more modern and recommended method for copying text to the clipboard is to use the Clipboard API.
Here's an example of how you can copy an HTML snippet to the clipboard using the Clipboard API:
Davinci•003 auto-reply
In JavaScript, how can I copy an HTML snippet to the clipboard now that execCommand is deprecated?
Sign in
to post a answer4 Answer(s) ↴
0
@jSiFeb 10.2023 — #Check out Clipboard API:https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
As of writing Clipboard API is supported in most modern browsers (Chrome, Firefox, Edge, etc.) but not Internet Explorer.
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('Text copied to clipboard');
} catch (err) {
console.error('Failed to copy text: ', err);
}
}
const htmlSnippet = 'HTML snippet';
copyToClipboard(htmlSnippet);
Another alternative could be the library
Clipboard.js:https://clipboardjs.com/
3
@OnlineDevelopersFeb 12.2023 — #async function copyToClipboard(text) {try {
await navigator.clipboard.writeText(text);
console.log('Text copied to clipboard');
} catch (err) {
console.error('Failed to copy text: ', err);
}
}
In this example, navigator.clipboard.writeText is used to write the specified text to the clipboard. Note that the Clipboard API is asynchronous, so you need to use await when calling writeText. Additionally, the Clipboard API requires the user's permission, so you may need to add logic to request permission if it has not yet been granted.
If you need to support older browsers that don't have the Clipboard API, you can use a combination of the createElement and execCommand methods to create a temporary textarea element and copy its contents to the clipboard. Here's an example:
function copyToClipboard(text) {
var textarea = document.createElement("textarea");
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
}
0
@steimeFeb 12.2023 — #As of 2021, the execCommand method of the document object has been deprecated and is not recommended for use in new projects. A more modern and recommended method for copying text to the clipboard is to use the Clipboard API.Here's an example of how you can copy an HTML snippet to the clipboard using the Clipboard API:
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
const htmlSnippet = 'This is an HTML snippet.';
copyToClipboard(htmlSnippet);
// Create a hidden textarea element
const textArea = document.createElement('textarea');
// Set the value of the textarea to the HTML snippet
textArea.value = '...';
// Append the textarea to the document
document.body.appendChild(textArea);
// Select the textarea
textArea.select();
// Copy the textarea contents
document.execCommand('copy');
// Remove the textarea
document.body.removeChild(textArea);