Wie kann ich in HTML5 in die Zwischenablage kopieren, ohne Flash zu verwenden?

Question

Ich möchte eine Kopie-in-Zwischenablage-Funktion in HTML5 verwenden, aber ohne Flash zu verwenden. Ist es möglich? Wie?

Ich habe versucht, eine Kopie zu clipboad Funktion mit JavaScript zu implementieren, aber es funktioniert nicht:

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

Sie die HTML5 clipboard apihttp://www.htmlgoodies.com/html5/other/working-with-clipboard-apis-in-html5-web-apps.html#fbid=eh9tM7GHJWF

verwenden können, Aber beachten Sie, dass nicht alle Browser vollständig Unterstützung es ab sofort: http://caniuse.com/#feat=clipboard

Answer 2

Es funktioniert nicht, weil es eine Benutzerinteraktion wie klicken erfordert. Andernfalls wird document.execCommand nicht funktionieren. Sie können auch überprüfen, clipboard.js, es ist eine super einfache Bibliothek zum Kopieren von Text in die Zwischenablage, die Flash nicht benötigt.

Answer 3

UPDATE: Diese Lösung funktioniert auch in Safari.

Ich glaube nicht, dass es eine nicht-flash, Cross-Browser-Lösung dafür gibt. Hier ist eine Lösung, die funktioniert zumindest in den neuesten Versionen von Chrome, Firefox und Rand:

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>

Hinweis: Der Versuch, diese Lösung zu verwenden, um eine leere Zeichenfolge oder eine Zeichenfolge zu kopieren, das ist Nur Leerzeichen funktionieren nicht.

Answer 4

Wenn es Ihnen egal ist, dass der Inhalt des Textfelds vor dem Kopieren ausgewählt wird, ist hier eine Zwei-Zeilen-Lösung, die zumindest in Chrome 56 und Edge funktioniert, aber ich wette, dass es auch in anderen Browsern funktioniert .

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 5

Funktion für Text in die Zwischenablage einfügen:

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