. Advertisement .
..3..
. Advertisement .
..4..
One of the most utilized features in modern computers is the copy and paste function. Recently, programmatically copying text to a clipboard has become standard practice. Don’t know how to copy to clipboard in Javascript? Check out our guide to learn this technique.
Method 1: Utilizing Document.execcommand() To Copy To Clipboard In Javascript
The most common way to interact with a clipboard is using this approach. With this approach, you can carry out the following three operations.
- Copy content to clipboard in Javascript utilizing
Document.execCommand(‘copy’). - Cut selected text and put it to clipboard utilizing
Document.execCommand(‘cut’). - Paste saved material on your clipboard utilizing
Document.execCommand(‘paste’).
Keep in mind that you must pass in the arguments of the specified operation. To further comprehend this copy procedure, let’s use the example below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button onclick="copyToClipBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
We start with an HTML file, which has a textarea with a button and a string. In this case, the goal is to copy the content already in the textarea as we press Copy. Then, you get a JS file with a function named copyToClipBoard(). It will handle the task of copying text to a clipboard.
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
document.execCommand('copy');
alert("Copied!");
}
You can locate the textarea already present in the DOM utilizing document.getElementById, and you can keep this element within the content variables.
At this point, the content variable contains the textarea’s contents. You must first use the select() function to choose the complete text before we can copy it. This is comparable to how you pick text with your mouse.
Now, copy the chosen text utilizing the method document.execCommand(‘copy’), and you will get a notification indicating the content has been successfully copied to your clipboard.
The copyToClipBoard() function must finally be invoked on the Copy option as an event onClick. You can now view the results by opening the HTML page in the browser.
Method 2: Utilizing Clipboard API To Copy To Clipboard In Javascript
By utilizing the write operations and asynchronous read offered by Clipboard API, you may copy or paste data to or from a clipboard. Clipboard API is accessible within the object navigator.clipboard.
Not every browser can implement this API since it is a new feature to JavaScript.
Apply the following code to determine whether your browser is compatible with this API.
if (!navigator.clipboard) {
// Clipboard API not available
return
}
Here is how to copy content to a clipboard with the help of Clipboard API.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button id="btn" onclick="copyToClickBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
As you can see, the code below is almost identical to the previous one. The sole distinction is that copyToClickBoard() has been altered.
function copyToClickBoard(){
var content = document.getElementById('textArea').innerHTML;
navigator.clipboard.writeText(content)
.then(() => {
console.log("Text copied to clipboard...")
})
.catch(err => {
console.log('Something went wrong', err);
})
}
Pressing the Copy option will trigger the call to this method. Within this function, you can get the content in textarea utilizing the property innerHTML and saving it in the variable content.
There are two methods on navigator.clipboard. The first one is writeText() for copying content to clipboard. The second is readText() which can be utilized to read copied content in a clipboard before pasting it. In this case, you will solely focus on the writeText() function.
This method requires you to pass the content variable containing the complete text in string formats. The text will then be copied to the clipboard using this technique. If this works, a Text copied to clipboard… message will be displayed. Otherwise, you will get a notification based on the mistake type.
The Bottom Line
So there you have a thorough guide on how to copy to clipboard in Javascript. There are two different techniques to perform this task, so you can try both of them and pick the one that appears easier for you.Bonus: if you want to learn how to copy and paste to clipboard in Python, check out this detailed guide.
Leave a comment