content.select() not working on a `element`

Question

I'm trying to make a button to select the contents of a <code> element. However, it's not working and I am getting "content.select() is not a function

<body>
<div>
    <button type="button" id="copyButton" class="btn btn-primary" onclick="copyConfig()">Copy Config</button>
    <br><br>
    <pre><code id="contentCfg">{{ content }}</code></pre>
</div>
</body>
<script>
    function copyConfig() {
        const content = document.getElementById("contentCfg").textContent;
        content.select();
        content.setSelectionRange(0, 99999);
        document.execCommand("copy");
    }
</script>

No idea why this wouldn't work, {{ content }} automatically gets filled with text by my template serve.r

`textContent` is a `string` value, not an `HTMLElement`. – Dai Dec 26 '20 at 00:02 — Dai, Dec 26 '20 at 00:02

score 0 · Answer 1 · answered Dec 26 '20 at 00:06

0

Ended up fixing it by changing the js to this (added the elem parts)

function copyConfig() {
        const content = document.getElementById("contentCfg").textContent;
        const elem = document.createElement("textarea");
        document.body.appendChild(elem)
        elem.value = content;
        elem.select();
        elem.setSelectionRange(0, 99999);
        document.execCommand("copy");
        document.body.removeChild(elem);
    }

answered Dec 26 '20 at 00:06

fiji

228
5
21

1

You anwered your own question in less than 10 minutes? Bravo. – Louys Patrice Bessette Dec 26 '20 at 00:08

pilchard · Accepted Answer · 2020-12-26T01:07:16.933

You can actually solve this using Document.createRange(), Range.selectNodeContents() and Window.getSelection() thus avoiding unnecessary DOM manipulation.

See the example on MDN or discussion in this question: Selecting text in an element (akin to highlighting with your mouse)

function copyConfig() {
  const contentNode = document.getElementById("contentCfg")

  const range = document.createRange();
  range.selectNodeContents(contentNode);
  
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  document.execCommand("copy");
}

const copyButton = document.getElementById('copyButton');
copyButton.addEventListener('click', copyConfig);

<div>
    <button type="button" id="copyButton" class="btn btn-primary">Copy Config</button>
    <br><br>
    <pre><code id="contentCfg">{{ content }}</code></pre>
</div>

content.select() not working on a `element`

2 Answers2

Linked

content.select() not working on a element

2 Answers2

Linked

content.select() not working on a `element`