Copy link on button click into clipboard not working

copy url to clipboard javascript
javascript copy to clipboard without input
angularjs copy to clipboard
hyperlink to copy text to clipboard
javascript copy table to clipboard
copy ip to clipboard
copy to clipboard jquery for all browsers
chrome copy to clipboard

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>

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>

JavaScript copy to clipboard not working, So I suggest you pass the id of the element you want to copy. <button onClick=' copyText("display")'> Copy� Click on the button to copy the text from the text field. Copy to clipboard Copy text ">Copy text</button> Step 2) Add JavaScript:

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>

How to copy TEXT to Clipboard on Button-Click, Here I'm giving a demo as to how to copy a Text directly to clicpboard without a Flash. You are linking to a resource using the non-secure http:// protocol, which may not work <link href='https://fonts.googleapis.com/css?family=Oswald' rel=' stylesheet' type='text/css'> to copy a TEXT to Clipboard on a Button-Click</p>. If, for some reason, the copy-and-paste function isn’t working in Windows, one of the possible causes is due to some corrupted program components. Other possible causes include antivirus software, problematic plugins or features, certain glitches with the Windows system, or a problem with the “rdpclicp.exe” process.

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>

How To Copy to Clipboard, Click on the button to copy the text from the text field. Copy to clipboard Copy text. Copy Text to Clipboard. Step 1) Add HTML:� Copy Link. Comments. To remove an item from the history, click on its X button. Clear Clipboard History To clear all the items in your Clipboard history, click on the link at the top to Clear

Interact with the clipboard, To make the "copy" button copy the contents of the <input> element, you Because the execCommand() call is inside a click event handler, you Depending on the browser, this may not work. Copy link on button click into clipboard not working. Ask Question Asked 1 year, @Mr.Jo this is just a working example on passing the element, if you want me to

How can I copy text to clipboard with JavaScript?, Learn how to programmatically copy text to clipboard with a few lines of JavaScript is the ability to copy text to clipboard with a single button click. Bear in mind that this method will not work everywhere, but only as a result� Copy the file clipboard.min.js from the dist folder into the Resources > Scripts folder of the Flare project. After adding this script file, you will need to add a link to the script file in the head tag of topics that will use the script, and elements that will contain text and the button need to be added to the body of these topics.

Use Javascript to Copy and Paste from the Clipboard, Browser Issues. Google Chrome. This no longer works in Google Chrome. Internet Explorer. If Internet Explorer is used as the client browser then you should� Today you will learn to create Copy On Button Click Program. Basically, there is a text field with a line of text and below is a button to copy all the matters, when you click on the button then all text will copy in your clipboard. Not only with the text field, but you can also place the program anywhere according to your requirement.

Comments
  • Worked for me on my Safari.
  • @Raymond LOL! Thats so strange. Do you have an iPhone or iPad too?
  • I tested with iPad, but it is old and outdated Safari could be an issue for testing. I posted an answer with the documentation on range.
  • Another revision, test please to make sure.
  • I'll try it out and let you know if it works! Thanks!
  • I just redid it. Sorry I had to get to a computer, wasn't able to code before because I was on a Ipad.
  • Hm strange, I don't have an element "el"?
  • @Mr.Jo this is just a working example on passing the element, if you want me to fix your code give me a second.
  • Whats with the IE < 9 ? Do we need this?
  • This does not take a variable as a string for the URL, as he asked for it to in his example. And all my example's do cover this. As he stated this does not work in iOS.