Skip to content

Instantly share code, notes, and snippets.

@a1iraxa
Forked from GarySwift/copy.js
Created April 15, 2021 23:08
Show Gist options
  • Save a1iraxa/5065ae0a95da8113bb3e15d0a8230dfb to your computer and use it in GitHub Desktop.
Save a1iraxa/5065ae0a95da8113bb3e15d0a8230dfb to your computer and use it in GitHub Desktop.
5 ways copy text to clipboard using jQuery (+ JavaScript)
jQuery(document).ready(function($) {
// If a copy clickable input is clicked
// input value will be highlighted and copied to clipboard
$('body').on('click', 'input.js-click-to-copy-input', function(e) {
copy_input( this );
});
// If a button to copy an input is clicked
// associated input value will be highlighted and copied to clipboard
$('body').on('click', 'a.js-click-to-copy-link', function(e) {
e.preventDefault();
var copy_id = $(this).data('copy-id');
copy_input( $('#'+copy_id) );
});
// If copy clickable text is clicked
// all text in this element will be highlighted and copied to clipboard
$('body').on('click', '.js-click-to-copy-text', function(e) {
var range = document.createRange();
var sel = window.getSelection();
range.setStartBefore(this.firstChild);
range.setEndAfter(this.lastChild);
sel.removeAllRanges();
sel.addRange(range);
try {
var successful = document.execCommand('copy');
} catch(err) {
console.error('Unable to copy');
}
});
// copy function
function copy_input( $input ) {
$input.focus();
$input.select();
try {
var successful = document.execCommand('copy');
} catch(err) {
console.error('Unable to copy');
}
}
});
// Plain JavaScript
// <textarea name="email-details" id="message-textarea" rows="15" style="width: 100%">
// <a href="#" class="button secondary" id="js-copy-message">Copy Message</a>
<script>
var copy = document.getElementById('js-copy-message');
copy.onclick = function() {
var copyTextarea = document.querySelector('#message-textarea');
copyTextarea.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');
}
return false;
};
</script>
<!-- input value will be highlighted and copied to clipboard if clicked in -->
<input id="clickable-input" class="js-click-to-copy-input" type="text" value="Text to copy" readonly><br>
<!-- associated input value will be highlighted and copied to clipboard if this link is clicked -->
<a href="#" data-copy-id="clickable-input" class="js-click-to-copy-link button">Copy</a><br>
<!-- all text in this element will be highlighted and copied to clipboard if clicked -->
<pre class="js-click-to-copy-text">Text to copy</pre>
<!-- This will work without an external JavaScript file -->
<input value="Text to copy" onclick="this.focus();this.select();document.execCommand('copy')" onfocus="this.focus();this.select();document.execCommand('copy')">
.copy {
cursor: copy;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment