'copy text to clipboard using .select() getting Uncaught TypeError
I'm trying to follow this code: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
HTML Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">App Link</h4>
</div>
<div class="modal-body">
<input id="appID" value="123"></input>
<button type="button" class="btn btn-success" id="copyBtn">Copy</button>
</div>
</div>
</div>
</div>
Here's my JS:
var copyBtn = document.getElementById('copyBtn');
copyBtn.onclick = function(){
var myCode = document.getElementById('appID').value;
var fullLink = document.createElement('input');
document.body.appendChild(fullLink);
fullLink.value = "http://fulllink/" + myCode;
fullLink.select();
document.execCommand("copy", false);
fullLink.remove();
alert("Copied the text: " + fullLink.value);
}
Code will not work when input and button are inside the modal; code will work if placed in the body. Why?
Solution 1:[1]
You are receiving the error because .select
is a function bound to input elements. You're currently trying to call select on your fullLink
string. We need to create an input element and give it your value. Something like this:
var copyBtn = document.getElementById('copyBtn');
copyBtn.onclick = function(){
var myCode = document.getElementById('appID').value;
var fullLink = document.createElement('input');
document.body.appendChild(fullLink);
fullLink.value = "http://fulllink/" + myCode;
fullLink.select();
document.execCommand("copy", false);
fullLink.remove();
alert("Copied the text: " + fullLink.value);
}
<input id="appID" value="123"></input>
<button id="copyBtn">Copy</button>
Solution 2:[2]
It's happens because your var fullLink
is not a DOM node but a simple text. Function select
defined for DOM nodes.
Solution 3:[3]
If you delete tabindex="-1"
then it works.
Solution 4:[4]
I had similar problem,try this code
$('#copyBtn').click(function() {
var text=$('#appID').text();
navigator.clipboard.writeText(text);
});
Solution 5:[5]
A very elegant way of doing it would be by creating a text area element, that would allow us to take advantage of the .select function.
JS code:
function copyStringToClipboard (str) {
// Create new element
var el = document.createElement('textarea');
// Set value (string to be copied)
el.value = str;
// Set non-editable to avoid focus and move outside of view
el.setAttribute('readonly', '');
el.style = {position: 'absolute', left: '-9999px'};
document.body.appendChild(el);
// Select text inside element
el.select();
// Copy text to clipboard
document.execCommand('copy');
// Remove temporary element
document.body.removeChild(el);
}
Example of the function being called:
copyStringToClipboard("abc123");
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Phillip Thomas |
Solution 2 | Alexander |
Solution 3 | CKE |
Solution 4 | Vajiheh Habibi |
Solution 5 |