如何在不使用 Flash 的情况下在 HTML5 中复制到剪贴板？

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.

Answer 3

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.

Answer 4

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

Answer 5

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>

https://jsfiddle.net/uwd0rm08/

Answer 6

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/clipboard@2/dist/clipboard.min.js"></script>

To Know More About Its Usage visit Source : html5 copy to clipboard