The code snippet below demonstrates how to copy text to the clipboard using JavaScript in WordPress. This functionality can be useful in scenarios where you want to provide a convenient way for users to copy text from your website.
function wpsnippets_copyToClipboard(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
To use this code snippet, you can call the wpsnippets_copyToClipboard() function and pass the desired text as a parameter. The function creates a temporary textarea element, sets its value to the provided text, appends it to the document body, selects the text within the textarea, executes the copy command, and finally removes the textarea element from the document.
Keep in mind that this code snippet uses JavaScript and does not directly relate to WordPress development. However, you can easily integrate it into your WordPress theme or plugin by enqueueing the JavaScript file or adding the code within a <script> tag in your template files.
Examples
Example 1: Copy Text to Clipboard using JavaScript
This use case demonstrates how to copy text to the clipboard using JavaScript. The code example below shows a function that takes an input element’s value and copies it to the clipboard when a button is clicked.
function wpsnippets_copyToClipboard(elementId) {
var element = document.getElementById(elementId);
element.select();
document.execCommand("copy");
}
The wpsnippets_copyToClipboard function takes an elementId parameter, which is the ID of the input element containing the text to be copied. It selects the text in the input element using element.select() and then executes the copy command using document.execCommand("copy").
Example 2: Copy Text to Clipboard with Custom Button
This use case demonstrates how to copy text to the clipboard using a custom button. The code example below shows a function that takes a text string and copies it to the clipboard when a button with a specific class is clicked.
function wpsnippets_copyToClipboard(text, buttonClass) {
var button = document.querySelector("." + buttonClass);
button.addEventListener("click", function() {
var tempInput = document.createElement("input");
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
});
}
The wpsnippets_copyToClipboard function takes two parameters: text, which is the text to be copied, and buttonClass, which is the class of the button triggering the copy action. It creates a temporary input element, sets its value to the provided text, appends it to the document body, selects the text, executes the copy command, and finally removes the temporary input element from the document body.
Example 3: Copy Text to Clipboard with Feedback
This use case demonstrates how to provide feedback to the user when text is copied to the clipboard. The code example below shows a function that takes an input element’s value, copies it to the clipboard, and displays a success message.
function wpsnippets_copyToClipboard(elementId) {
var element = document.getElementById(elementId);
element.select();
document.execCommand("copy");
var feedback = document.createElement("span");
feedback.textContent = "Text copied to clipboard!";
element.parentNode.insertBefore(feedback, element.nextSibling);
setTimeout(function() {
feedback.parentNode.removeChild(feedback);
}, 3000);
}
The wpsnippets_copyToClipboard function takes an elementId parameter, which is the ID of the input element containing the text to be copied. After copying the text to the clipboard, it creates a new span element with a success message, inserts it after the input element, and removes it after 3 seconds using setTimeout.