I'm trying to copy text to clipboard that is inside a h3 tag. I get the following error at the copyText.select() code line.
Uncaught TypeError: copyText.select is not a function at HTMLDivElement.
edit: When using on a input-tag the copy to clipboard function works, but not when inside h3 tag.
HTML
<div class="colorDiv" id="firstColorObject">
<h3 class="colorCode" id="p1" value="123">#Color 1</h3>
</div>
JavaScript
document.querySelector("#firstColorObject").addEventListener("click", function(){
var copyText = document.getElementById("p1");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}, false);
I'm trying to copy text to clipboard that is inside a h3 tag. I get the following error at the copyText.select() code line.
Uncaught TypeError: copyText.select is not a function at HTMLDivElement.
edit: When using on a input-tag the copy to clipboard function works, but not when inside h3 tag.
HTML
<div class="colorDiv" id="firstColorObject">
<h3 class="colorCode" id="p1" value="123">#Color 1</h3>
</div>
JavaScript
document.querySelector("#firstColorObject").addEventListener("click", function(){
var copyText = document.getElementById("p1");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}, false);
- 1 Possible duplicate of How do I copy to the clipboard in JavaScript? – Mehdi Dehghani Commented Jul 26, 2018 at 18:10
3 Answers
Reset to default 5You can call select with an <input>-element but not with a <h3>-element.
Nevertheless you can take advantage of <input> when you assign the content of #p1 to a hidden field before calling select with it.
Note that: Calling select with an hidden field only works when you wrap an actually visible field around a <div>-element that is hidden (only tested with opacity:0). A value could not be copied (through select and document.execCommand("copy")) from a truly hidden input like this:
<input type="hidden" id="copyText"/>
Hope my example below helps you (to execute it click on "Run Code snippet"-Button):
document.querySelector("#firstColorObject").addEventListener("click", function(){
var p1 = document.getElementById("p1");
// set "#Color 1" with the hidden field so that you can call select on it
var hiddenField = document.getElementById("copyText");
hiddenField.value = p1.innerHTML;
hiddenField.select();
document.execCommand("copy");
alert("Copied the text: " + hiddenField.value);
}, false);<div class="colorDiv" id="firstColorObject">
<h3 class="colorCode" id="p1" value="123">#Color 1</h3>
<div style="opacity:0">
<input type="text" id="copyText"/>
</div>
</div>The input.select() function is not applicable to h3 . Manipulating the selection is usually done
with window.getSelection().addRange() .
Try
<html>
<body>
<h3>Hello world</h3>
<script type="text/javascript">
var h3 = document.querySelector('h3');
var r = document.createRange();
r.selectNode(h3);
window.getSelection().addRange(r);
document.execCommand("copy");
</script>
</body>
</html>
Clipboard js will be helpfull in your case