Created
October 7, 2015 09:44
-
-
Save davidbarredo/7221c8d48673da2175b9 to your computer and use it in GitHub Desktop.
Copy info to clipboard with javascript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function copyTextToClipboard(text) { | |
var textArea = document.createElement("textarea"); | |
// | |
// *** This styling is an extra step which is likely not required. *** | |
// | |
// Why is it here? To ensure: | |
// 1. the element is able to have focus and selection. | |
// 2. if element was to flash render it has minimal visual impact. | |
// 3. less flakyness with selection and copying which **might** occur if | |
// the textarea element is not visible. | |
// | |
// The likelihood is the element won't even render, not even a flash, | |
// so some of these are just precautions. However in IE the element | |
// is visible whilst the popup box asking the user for permission for | |
// the web page to copy to the clipboard. | |
// | |
// Place in top-left corner of screen regardless of scroll position. | |
textArea.style.position = 'fixed'; | |
textArea.style.top = 0; | |
textArea.style.left = 0; | |
// Ensure it has a small width and height. Setting to 1px / 1em | |
// doesn't work as this gives a negative w/h on some browsers. | |
textArea.style.width = '2em'; | |
textArea.style.height = '2em'; | |
// We don't need padding, reducing the size if it does flash render. | |
textArea.style.padding = 0; | |
// Clean up any borders. | |
textArea.style.border = 'none'; | |
textArea.style.outline = 'none'; | |
textArea.style.boxShadow = 'none'; | |
// Avoid flash of white box if rendered for any reason. | |
textArea.style.background = 'transparent'; | |
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); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var copyTextareaBtn = document.querySelector('.js-textareacopybtn'); | |
copyTextareaBtn.addEventListener('click', function(event) { | |
var copyTextarea = document.querySelector('.js-copytextarea'); | |
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'); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
From: http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript/30810322#30810322