Copy to clipboard is not a function when copying text inside h3 tag

Question

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);

Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Mehdi Dehghani, Jul 26 '18 at 18:10

Blauharley · Accepted Answer · 2018-07-26T18:48:28.787

You 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>

Oh ye this would work for sure! Thanks! Any reason why h3 doesn't work by it self? — Fig, Jul 26 '18 at 18:26
You are welcome. select is not supported with a h3-element because js is not implemented in browsers that way......h and input elements differ too much in the DOM-perspective. — Blauharley, Jul 26 '18 at 18:32

score 1 · Answer 2 · answered Jul 26 '18 at 18:40

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>

score 0 · Answer 3 · answered Jul 26 '18 at 18:13

0

Clipboard js will be helpfull in your case

answered Jul 26 '18 at 18:13

Harish Gupta

364
2
8
23

Copy to clipboard is not a function when copying text inside h3 tag

HTML

JavaScript

3 Answers3