So I want to create a ClickToCopyToClipboard using Javascript that when someone clicks on the textarea the contents of it will be copied to there clipboard. 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>
</div>
And here's my JS:
function copytxt(){
const textarea
document.querySelector("textarea");
textarea.select();
document.execCommand("copy");
};
CodePudding user response：
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"/>CodePudding user response：
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>