Menu
I have been scouring the internet all night to figure out how to use the execCommand('copy') feature. Finally, found a solution on https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en that works incredibly well. However, my new dilemma is that when I press the button that copies the value from the input field it adds extra white space to it. So with a normal copy/paste action (Ctl+E and Ctl+V) the input value appears like this:
TESTTESTTESTTEST
But when I press the button to copy the input value to the clipboard it looks like this:
TEST
TEST
TEST
TEST
How do I remove the extra white space that the execCommand('copy') adds to the value of the input field. I have tried .replace(" ", ""); but that does not work. I am unsure how to continue. Here is the code:
function copyValueToClipBoard(containerid) {
var valueToBeCopied = document.getElementById(containerid);
var range = document.createRange();
range.selectNode(valueToBeCopied);
window.getSelection().addRange(range);
try {
// Now that we've selected the anchor text, execute the copy command
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy email command was ' + msg);
} catch(err) {
console.log('Oops, unable to copy');
}
// Remove the selections - NOTE: Should use
// removeRange(range) when it is supported
window.getSelection().removeAllRanges();
};<!DOCTYPE html>
<html>
<head>
<title>Customer Information</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<b>First Name:</b><input type = "text" id = "firstName"/><button onclick = "copyValueToClipBoard('firstName')">Copy to Clipboard</button>
<textarea rows="50" cols="50"></textarea>
<br>
</body>
</html>
221
The alternative to document. execCommand() is Clipboard API, via navigator.
Select the text or graphics you want to copy, and press Ctrl+C. Each selection appears in the Clipboard, with the latest at the top. Optionally, repeat step 2 until you've copied all the items you want to use. Tip: After you open the Clipboard, it stores content that you copy or cut from anywhere.
The problem is with the selection. Window.getSelection normally works with element nodes and text nodes. In your case, you are selecting the whole input node, which gives you the result you have. With normal nodes, you could select the text node only, but inputs don't have text nodes.
But inputs have setSelectionRange method, which allows to select the value only. Using selectionEnd property, you can select the whole value, but note the whole node. Like this:
function copyValueToClipBoard(containerid) {
var valueToBeCopied = document.getElementById(containerid);
valueToBeCopied.setSelectionRange(0, valueToBeCopied.selectionEnd)
try {
// Now that we've selected the anchor text, execute the copy command
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy email command was ' + msg);
} catch(err) {
console.log('Oops, unable to copy');
}
// Remove the selections - NOTE: Should use
// removeRange(range) when it is supported
window.getSelection().removeAllRanges();
};<!DOCTYPE html>
<html>
<head>
<title>Customer Information</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<b>First Name:</b><input type = "text" id = "firstName"/><button onclick = "copyValueToClipBoard('firstName')">Copy to Clipboard</button>
<textarea rows="50" cols="50"></textarea>
<br>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
