Kopieren in die Zwischenablage funktioniert nicht

Die Probe ich aus auf codepen Kopieren funktioniert: http://codepen.io/SitePoint/pen/vNvEwE Kopieren in die Zwischenablage funktioniert nicht

<label for="website">Website:</label> 
<input type="text" id="website" value="http://www.sitepoint.com/" /> 
<button data-copytarget="#website">copy</button> 

<label for="twitter">Twitter:</label> 
<input type="text" id="twitter" value="http://twitter.com/craigbuckler" /> 
<button data-copytarget="#twitter">copy</button> 

/* 
    Copy text from any appropriate field to the clipboard 
    By Craig Buckler, @craigbuckler 
    use it, abuse it, do whatever you like with it! 
*/ 
(function() { 

    'use strict'; 

    // click events 
    document.body.addEventListener('click', copy, true); 

    // event handler 
    function copy(e) { 

    // find target element 
    var 
     t = e.target, 
     c = t.dataset.copytarget, 
     inp = (c ? document.querySelector(c) : null); 

    // is element selectable? 
    if (inp && inp.select) { 

     // select text 
     inp.select(); 

     try { 
     // copy text 
     document.execCommand('copy'); 
     inp.blur(); 

     // copied animation 
     t.classList.add('copied'); 
     setTimeout(function() { t.classList.remove('copied'); }, 1500); 
     } 
     catch (err) { 
     alert('please press Ctrl/Cmd+C to copy'); 
     } 

    } 

    } 

})();

Wenn ich den Code auf localhost oder Upload auf meinem Server schreiben, funktioniert es nicht. Ziemlich sicher, ich kopiere es genau.

http://loverant.com/bootstraptest/

Ich bin neu in Codierung so bin ich wahrscheinlich nur etwas wirklich dumm fehlt.

Quelle

2016-04-10 Matt MacPherson

Die Unterstützung dieser Funktion ist in allen Browsern schwierig. Überprüfen Sie diesen Thread http://StackOverflow.com/Questions/400212/How-Do--Copy-to-the-Clipboard-in-Javascript –

Es funktioniert gut für mich auf Codepen in jedem Browser, in dem ich getestet habe. Und Ich habe das gleiche Problem mit clipboard.js. –

Ich habe eine Antwort geschrieben, die dein Problem löst. –

Wie auf Ihrer Seite http://loverant.com/bootstraptest/ getestet wurde, wird der JavaScript-Teil früher ausgeführt, bevor das gesamte DOM geladen und im Browser geparst wird. In der Konsole gibt es script.js:11 Uncaught TypeError: Cannot read property 'addEventListener' of null Fehler beim Zugriff auf die document.body.

Bewegen Sie Ihr gesamtes Javascript am Ende kurz vor dem schließenden </body> Tag.

<html> 
 
<head> 
 
\t <link href="style.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
\t <label for="website">Website:</label> 
 
\t <input type="text" id="website" value="http://www.sitepoint.com/" /> 
 
\t <button data-copytarget="#website">copy</button> 
 

 
\t <label for="twitter">Twitter:</label> 
 
\t <input type="text" id="twitter" value="http://twitter.com/craigbuckler" /> 
 
\t <button data-copytarget="#twitter">copy</button> 
 

 
\t <script type="text/javascript"> 
 
\t /* 
 
\t Copy text from any appropriate field to the clipboard 
 
\t By Craig Buckler, @craigbuckler 
 
\t use it, abuse it, do whatever you like with it! 
 
\t */ 
 
\t (function() { 
 
\t \t 'use strict'; 
 

 
\t \t // click events 
 
\t \t document.body.addEventListener('click', copy, true); 
 

 
\t \t // event handler 
 
\t \t function copy(e) { 
 
\t \t \t // find target element 
 
\t \t \t var 
 
\t \t \t \t t = e.target, 
 
\t \t \t \t c = t.dataset.copytarget, 
 
\t \t \t \t inp = (c ? document.querySelector(c) : null); 
 

 
\t \t \t // is element selectable? 
 
\t \t \t if (inp && inp.select) { 
 
\t \t \t \t // select text 
 
\t \t \t \t inp.select(); 
 

 
\t \t \t \t try { 
 
\t \t \t \t \t // copy text 
 
\t \t \t \t \t document.execCommand('copy'); 
 
\t \t \t \t \t inp.blur(); 
 

 
\t \t \t \t \t // copied animation 
 
\t \t \t \t \t t.classList.add('copied'); 
 
\t \t \t \t \t setTimeout(function() { t.classList.remove('copied'); }, 1500); 
 
\t \t \t \t } 
 
\t \t \t \t catch (err) { 
 
\t \t \t \t \t alert('please press Ctrl/Cmd+C to copy'); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t })(); 
 
\t </script> 
 
</body> 
 
</html>

Wenn Sie die Javascript aus externen Datei enthalten wird, müssen Sie es auch am unteren Rand einzufügen. Als Alternative können Sie jquery verwenden und das gesamte Javascript in $(function() { // your code // }); einbinden. Dadurch wird sichergestellt, dass Ihr Code immer gestartet wird, nachdem das vollständige DOM vom Browser geparst wurde und es keine Rolle spielt, wo Sie Ihren Code platzieren.

Quelle

2016-04-10 19:38:10

Alter, du bist großartig! Vielen Dank! –

Gut zu helfen! Bestätigen Sie die Antwort dann :) –

es funktioniert nicht in iPhones (Safari) ..... PLZ schlagen die Lösung vor. –

Kopieren in die Zwischenablage funktioniert nicht

Antwort

Verwandte Themen