Copy link on button click into clipboard not working

Question

I'm currently trying to write a JS function to provide a "copy link on button click". It works fine on Android and PC but when I try it on my iPad or iPhone I'm getting an error:

TypeError: Argument 1 ('refNode') to Range.selectNodeContents must be an instance of Node

I've build in a way to copy it on IOS devices too, because the normal copy command don't works:

function copyUrl(e) {
    var tmp = jQuery("<input>");
    jQuery("body").append(tmp.val(e));

    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
        var editable = tmp.contentEditable;
        var readOnly = tmp.readOnly;
        tmp.contentEditable = true;
        tmp.readOnly = false;
        var range = document.createRange();
        range.selectNodeContents(tmp);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        tmp.setSelectionRange(0, 999999);
        tmp.contentEditable = editable;
        tmp.readOnly = readOnly;
    } else {
        tmp.select();
    }

    document.execCommand("copy");
    tmp.remove();
    alert("Link copied successfully!")
}

div {
  padding: 30px;
}

a {
  border: 1px solid;
  padding: 12px 10px;
  cursor: pointer;
}

a:hover {
  border-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a class="btn-floating" onclick="copyUrl('google.de')">Share</a>
</div>

What have I missed?

Answer 1

If you pass the JQuery element as an argument element, it will give the TypeError you are getting because it does not interface the Node.

The TypeError message is related to you not doing one of the following.

// copy(document.getElementByClass("")[0];
copy(document.getElementById("")); // Pure JS
copy($("#")[0]); // JQuery

Example, as asked for a link passing a variable string: It creates an element then removes it after selecting it and copying the variable's value we inserted in it.

I suggest looking into the library Cliboard.js

function copy(href) {
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    dummy.setAttribute('value', href);
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

<a href="#" onclick="copy('https://wehavehaxedthecliboard.com')">Copy</a>

FROM IOS Copy to clipboard using Javascript in iOS

var copy = function(href) {
    var input = document.createElement("input");
    document.body.appendChild(input);
    input.setAttribute('value', href);

    var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i);

    if (isiOSDevice) {

        var editable = input.contentEditable;
        var readOnly = input.readOnly;

        input.contentEditable = true;
        input.readOnly = false;

        var range = document.createRange();
        range.selectNodeContents(input);

        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);

        input.setSelectionRange(0, 999999);
        input.contentEditable = editable;
        input.readOnly = readOnly;

        document.body.removeChild(input);
    } else {
        input.select();
    }

    document.execCommand('copy');
    document.body.removeChild(input);
}

I think this works on ios
<a href="#" onclick="copy('http://google.com')">Copy text</a>

Answer 2

Try something like this:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
 $('.copy-to-clipboard input').click(function() {
 $(this).focus();
 $(this).select();
 document.execCommand('copy');
 alert('Copy to Clipboard!');
    });
});
</script>


<span class="copy-to-clipboard">
 <input id="copy-test" readonly type="text" value="google.de">
</span>

Answer 3

Try this one

/*
    Copy text from any appropriate field to the clipboard
  By Craig Buckler, @craigbuckler
  use it, abuse it, do whatever you like with it!
*/
(function() {

    'use strict';
  
  // click events
  document.body.addEventListener('click', copy, true);

    // event handler
    function copy(e) {

    // find target element
    var 
      t = e.target,
      c = t.dataset.copytarget,
      inp = (c ? document.querySelector(c) : null);
      
    // is element selectable?
    if (inp && inp.select) {
      
      // select text
      inp.select();

      try {
        // copy text
        document.execCommand('copy');
        inp.blur();
        
        // copied animation
        t.classList.add('copied');
        setTimeout(function() { t.classList.remove('copied'); }, 1500);
      }
      catch (err) {
        alert('please press Ctrl/Cmd+C to copy');
      }
      
    }
    
    }

})();

div {
  padding: 30px;
}

a {
  border: 1px solid;
  padding: 12px 10px;
  cursor: pointer;
}

a:hover {
  border-color: blue;
}

<div>
<input style="position: absolute;
  height: 100px;
  width: 100px;
  right: -150px;
  top: -150px;overflow:hidden;" type="text" id="website" value="http://hpecas.com/teste" />

<a class="btn-floating" href="#" data-copytarget="#website">Share</a>
</div>