So I want to create a ClickToCopyToClipboard using plain Javascript that when someone clicks on the textarea the contents of it will be copied to there clipboard. That works in multiple textareas. But all the videos I watched from Youtube needs a button to be clicked.
So here's my HTML:
<div class="wrapper">
<textarea
onclick="copytxt()">Lorem
ipsum dolor sit amet,
consectetur adipiscing elit.
Pellentesque bibendum risus
eros, eu mollis lorem
consectetur eget.</textarea>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum risus eros, eu mollis lorem consectetur eget.
And here's my JS:
function copytxt(){
const textarea
document.querySelector("textarea");
textarea.select();
document.execCommand("copy");
};
Your JS is close, though it has a syntax error in it (missing =). Here's a working example with proper addEventListener style, as opposed to inline JS.
document.querySelector("textarea").addEventListener("click", function(){
this.select();
document.execCommand("copy");
});<textarea readonly>click me to copy my contents</textarea>
<br><br>
Then try pasting them in here:
<input type="text"/>try adding an event listener to the text area,
<!DOCTYPE html>
<html>
<body>
<p>Click anywhere in the textarea to copy the text from it. Try to paste the text (e.g. ctrl+v) afterwards in the input field given below, to see the effect.</p>
<textarea type="text" value="Hello World" id="myInput">
hello world!!!
</textarea>
<input type="text" />
<script>
/* Get the text field */
var copyText = document.getElementById("myInput");
copyText.addEventListener('click', () => { myFunction(); })
function myFunction() {
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
</script>
</body>
</html>
EDIT : If you want to copy from multiple textareas efficiently , you can try this
<!DOCTYPE html>
<html>
<body>
<p>Click anywhere in the textarea to copy the text from it. Try to paste the text (e.g. ctrl+v) afterwards in the input field given below, to see the effect.</p>
<textarea type="text" value="first textarea" class="myInput">
first textarea
</textarea>
<textarea type="text" value="second textarea" class="myInput">
second textarea
</textarea>
<textarea type="text" value="third textarea" class="myInput">
third textarea
</textarea>
<textarea type="text" value="fourth textarea" class="myInput">
fourth textarea
</textarea>
<input type="text" />
<script>
let x = document.querySelectorAll(".myInput");
for (let i = 0; i < x.length; i++) {
x[i].addEventListener("click", function() {
this.select();
document.execCommand("copy");
});
}
</script>
</body>
</html>Here, I've made an array of all the textareas using querySelectorAll and added an event listener to each textarea from the array and the copying part is written in the callback function of the event listener. do notice, everything here is written in plain vanilla javascript and do green tick this answer if it was helpful.