How can I copy to clipboard in HTML5 without using flash?

Question

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');     } } 

Answer 1

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

Answer 2

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.