2

Ok so feels like i have gone down a rabbit hole of how to copy text to clipboard on here and tried a lot of suggestions

seems easy to do it for chrome but that option doesn't work in other browsers

I have a few requirements

  • I would like to copy text to clipboard
  • to be able to copy a section of html with multiple elements
  • To work in safari and chrome at least
  • Vanilla Javascript

I have found this solution and it works except that it copies the html tags as well?

i tried changing the .innerHTML to .value on the button, but that comes back undefined


<div id="something">
  <div>first name: <span class="name">name</span></div>
  <div>Job title: <span class="job">job</span></div>
    <div>Phone number: <a href="0123456789" class="number">0123456789</a></div>
  <img class="companylogo" src="./img/example.jpg">
</div>


<button onclick="copyToClipboard(document.getElementById('something').innerHTML)">
  Copy the stuff
</button>


<script>

    /* copy function */
function copyToClipboard(textToCopy) {
  var textArea;

  function isOS() {
    //can use a better detection logic here
    return navigator.userAgent.match(/ipad|iphone/i);
  }

  function createTextArea(text) {
    textArea = document.createElement('textArea');
    textArea.readOnly = true;
    textArea.contentEditable = true;
    textArea.value = text;
    document.body.appendChild(textArea);
  }

  function selectText() {
    var range, selection;

    if (isOS()) {
      range = document.createRange();
      range.selectNodeContents(textArea);
      selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      textArea.setSelectionRange(0, 999999);
    } else {
      textArea.select();
    }
  }

  function copyTo() {
    document.execCommand('copy');
    document.body.removeChild(textArea);
  }

  createTextArea(textToCopy);
  selectText();
  copyTo();
}

</script>
mike
  • 57
  • 9

2 Answers2

0
document.getElementById('something').innerHTML

sends html code inside #something to copyToClipboard and this behavior you mentiond is expected . what do you want to be copied to clipboard if not html ?

hosseind600
  • 26
  • 4
  • i would like it to copy the rich text rather than HTML. so the same as if you did ctrl a, ctrl c on the web browser – mike Feb 10 '21 at 17:16
  • what is the content of the textarea ? – hosseind600 Feb 10 '21 at 17:20
  • because a textarea is created whit js in your code but its content is not initiated and the value passed to the copytoclipboard funtion is html code as i mentioned before . if you want to copy textarea's content you should pass something like document.getElementById('textarea.myTextarea').value to that funtion – hosseind600 Feb 10 '21 at 17:24
  • Hi I tried that solution but it didn't work i amended it to my code above. i inspected the console it says cannot read property of 'value' of null – mike Feb 11 '21 at 09:09
  • yes because thats null if you want to get textareas value it should be in the page – hosseind600 Feb 11 '21 at 13:02
0

thanks Hosseind600 for trying to help

but i managed to find some code that does exactly what i would like it to do. whilst ticking off the requirements i had set

its currently the second answer but highest votes How to copy text from a div to clipboard

   <html>
        <body>
            <div id="a" onclick="copyDivToClipboard()"> Click to copy </div>
            <script>
                function copyDivToClipboard() {
                    var range = document.createRange();
                    range.selectNode(document.getElementById("a"));
                    window.getSelection().removeAllRanges(); // clear current selection
                    window.getSelection().addRange(range); // to select text
                    document.execCommand("copy");
                    window.getSelection().removeAllRanges();// to deselect
                }
            </script>
        </body>
    </html>
mike
  • 57
  • 9