Copying to clipboard textbox value using jQuery/JavaScript
16,341
Solution 1
STEP 1: Change your copyToClipboard(element)
like this:
function copyToClipboard(text) {
var textArea = document.createElement( "textarea" );
textArea.value = text;
document.body.appendChild( textArea );
textArea.select();
try {
var successful = document.execCommand( 'copy' );
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy',err);
}
document.body.removeChild( textArea );
}
STEP 2: Give an id to your button and then add an event listener to it like this:
$( '#btnCopyToClipboard' ).click( function()
{
var clipboardText = "";
clipboardText = $( '#txtKeyw' ).val();
copyToClipboard( clipboardText );
alert( "Copied to Clipboard" );
});
Solution 2
Try this..this is the correct way.
Step 1:
function copyToClipboard(text) {
var textArea = document.createElement( "textarea" );
textArea.value = text;
document.body.appendChild( textArea );
textArea.select();
try {
var successful = document.execCommand( 'copy' );
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild( textArea );
}
Step 2:
$( '#btnCopyToClipboard' ).click( function()
{
var clipboardText = "";
clipboardText = $( '#txtKeyw' ).val();
copyToClipboard( clipboardText );
alert( "Copied to Clipboard" );
});
Solution 3
copyToClipboard()
get a element as parameter.
txtKeyw
is id and you must put #
before it.
Author by
User987
Updated on June 20, 2022Comments
-
User987 almost 2 years
I have a textbox & button which looks like this:
<div class="col-xs-11" style="padding:20px 0 "> <input type="text" class="form-control txtKeywords" id="txtKeyw" style="margin-bottom:10px; height:45px;" maxlength="80" placeholder="Click on keywords to combine your title"> <button type="submit" class="btn btn-space btn-success btn-shade4 btn-lg copyToClipboard"> <i class="icon icon-left s7-mouse"></i> Copy to Clipboard /button>
And when the user clicks the button copy to clipboard, I'd like to copy the contents of the textbox into the clipboard like this:
$(document).on("click", ".copyToClipboard", function () { copyToClipboard("txtKeyw"); successMessage(); });
Where the definition of the
copyToClipboard
function is:function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); }
But when I do this, nothing happens -- no values are copied to clipboard from the textbox... What am I doing wrong here?
MORE INFORMATION:
- This happens in both Chrome 59 64-bit and Firefox 54 32-bit.
successMessage()
is called and displayed in the browser.- Adding
#
in front of the element's ID does not resolve the issue.
-
User987 almost 7 yearsIt displays in log that copy was successsful ... but... when i try to paste text nothing is there ;/
-
User987 almost 7 yearsInstead of: $( #txtKeyw ).text() was required $( #txtKeyw ).val()
-
freginold almost 7 yearsQuotes are needed around
#txtKeyw
, no? -
Virk Bilal almost 7 yearsI have edited the answer based on comments. Sorry, I didn't try it myself but hopefully my answer gave an idea on how this should be
-
Adrian Hernandez-Lopez about 6 yearsWorks fine. Just a minor typo error in the code: the first function name has to be renamed from copyToClipboard to copyTextToClipboard. Thanks!
-
Mattaton almost 3 years@User987 I know this is old, but did you ever get this working? The approved answer doesn't work for me. Nearly exactly the same scenario.