How can I copy to clipboard in HTML5 without using flash?
I want to use a copy-to-clipboard function in HTML5, but without using flash. Is it possible? How?
I tried to implement a copy-to-clipboad function with JavaScript, but it is not working:
function Copytoclipboard() {
var body = document.body,
range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
document.execCommand('Copy');
} catch (e) {
range.selectNode(el);
sel.addRange(range);
document.execCommand('Copy');
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
range.execCommand('Copy');
}
}
Answers:
You can use the HTML5 clipboard api http://www.htmlgoodies.com/html5/other/working-with-clipboard-apis-in-html5-web-apps.html#fbid=eh9tM7GHJWF
But do note that not all browsers fully support it as of now: http://caniuse.com/#feat=clipboard
UPDATE: This solution now works in the current version of all major browsers!
function copyText(text){
function selectElementText(element) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
var element = document.createElement('DIV');
element.textContent = text;
document.body.appendChild(element);
selectElementText(element);
document.execCommand('copy');
element.remove();
}
var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
copyText(txt.value);
})<input id="txt" />
<button id="btn">Copy To Clipboard</button>Note: Trying to use this solution to copy an empty string or a string that is only whitespace will not work.
ALTERNATE, SIMPLIFIED SOLUTION
This alternate solution has been tested in Chrome, Safari, and Firefox.
const txt = document.querySelector('#txt')
const btn = document.querySelector('#btn')
const copy = (text) => {
const textarea = document.createElement('textarea')
document.body.appendChild(textarea)
textarea.value = text
textarea.select()
document.execCommand('copy')
textarea.remove()
}
btn.addEventListener('click', (e) => {
copy(txt.value)
})<input id="txt" />
<button id="btn">Copy</button>Note: This solution will not copy an empty string, but it will copy whitespace.
It's not working because it requires a user interaction such as click. Otherwise, document.execCommand will not work. You also might wanna check clipboard.js, it's a super easy library to copy text to clipboard that doesn't require Flash.
Function for inserting text into the clipboard:
function copyStringToClipboard (string) {
function handler (event){
event.clipboardData.setData('text/plain', string);
event.preventDefault();
document.removeEventListener('copy', handler, true);
}
document.addEventListener('copy', handler, true);
document.execCommand('copy');
}
If you don't care that the contents of the text field will be selected prior to copy, here is two-line solution that works at least in Chrome 56 and Edge, but I bet it works in other browsers as well.
function clickListener() {
document.getElementById('password').select();
document.execCommand('copy');
}
document.getElementById('copy_btn').addEventListener('click', clickListener);<input id=password value="test">
<button id=copy_btn>Copy</button>You can Use Clipboard.js TO add Copy to clipboard. This work without flash take a look on Code Which I use:
//for copy to clickboard
var els = document.querySelectorAll('pre');
for (var i=0; i < els.length; i++) {
//for CLIPBOARD
var atr = els[i].innerHTML;
els[i].setAttribute("data-clipboard-text", atr);
//For SELECT
var ids = "elementID"+[i]
els[i].setAttribute("id", ids);
els[i].setAttribute("onclick","selectText(this.id)");
}
var btns = document.querySelectorAll('pre');
var clipboard = new ClipboardJS(btns);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
//for select
function selectText(id){
var sel, range;
var el = document.getElementById(id); //get element id
if (window.getSelection && document.createRange) { //Browser compatibility
sel = window.getSelection();
if(sel.toString() == ''){ //no text selection
window.setTimeout(function(){
range = document.createRange(); //range object
range.selectNodeContents(el); //sets Range
sel.removeAllRanges(); //remove all ranges from selection
sel.addRange(range);//add Range to a Selection.
},1);
}
}else if (document.selection) { //older ie
sel = document.selection.createRange();
if(sel.text == ''){ //no text selection
range = document.body.createTextRange();//Creates TextRange object
range.moveToElementText(el);//sets Range
range.select(); //make selection.
}
}
}<pre>I Have To Copy it<pre>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>