We will learn how to implement javascript copy to clipboard and paste it into another textarea. Javascript is one of the most used and popular scripting languages. Javascript not only executes in the browser, with the release of nodejs we can execute javascript at the server.
We have seen a javascript clipboard example an application like embedded video URL, teaxtarea, coupon, etc. We can copy content from any HTML element like the Textarea field. div and input element to the clipboard is easy.
There are two ways browser extensions can interact with the system clipboard:
- The Document.execCommand() method
- The modern asynchronous Clipboard API.
Example of Javascript copy to clipboard
We’ll use Document.execCommand() method to copy the content of div to the clipboard and paste clipboard to textarea input.
<!DOCTYPE html>
<html>
<head>
<script>
function copyClipboard() {
var elm = document.getElementById("textAreaClipboard");
// for Internet Explorer
if(document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(elm);
range.select();
document.execCommand("Copy");
alert("Copied div content to clipboard");
}
else if(window.getSelection) {
// other browsers
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(elm);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("Copy");
alert("Copied div content to clipboard");
}
}
</script>
</head>
<body>
<h2>Javascript clipboard example</h2>
<div class="code-bg">
Click on the button to copy the text from the div element. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect. Demo data - Here type your own data.
</div>
<br/><br/>
<button onclick="copyClipboard()">Copy div text to clipboard</button>
<br/><br/>
<textarea id="textAreaClipboard" name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>
</body>
</html>Paste Javascript clipboard content to textarea element
Once we have successfully copied the javascript clipboard, then we can paste it in any place we want. Here we have modified our previous example and added a new textarea and button before the body.
<div>
<button onclick="pasteFromClipboard()">Paste from clipboard</button><br/>
<textarea id="pasteTextarea" name="w3review" rows="4" cols="50"></textarea>
</div>In the above code, we have added textarea with id pasteTextarea, here we’ll paste our Javascript clipboard copy content and we also have a button with callback function pasteFromClipboard(). Let’s implement paste code after Javascript clipboard copy code.
function pasteFromClipboard() {
var pasteText = document.querySelector("#pasteTextarea");
navigator.clipboard.readText().then(text => {
pasteText.innerText = text.toString();
});
}Here is a screenshot of the Javascript clipboard paste, it will ask permission to read from the navigator.clipboard object.
Conclusion
We have completed an example of how to copy the content of Textarea HTML an element to the clipboard in javascript. You can use clipboard.js to perform the same functionality.
Related posts
- Javascript Map and Join function
- JavaScript String – replace() Method
- Functional Programming in JavaScript
- The JavaScript an Array function
is this true
Hello ngodup,
I’m new to javascript, by self learning, and it is not being easy for now.
Ngodup, it is possible to copy the parameter value off a document.getElementById().value? Like the same way that you did with window.getSelection()? I’m not sure if i’m beeing clear.
Awesome! I’ve been searching for days how to copy an editable div field and your code works – thanks!
I was looking for quite a while before finding your solution – thanks!