Warum wird document.execCommand nicht mit der Zwischenablage gefüllt?

Question

Ich habe folgende HTML:

<td class="pn"> 
    <span class="copyable">410-555-1234</span> 
    <span title="Click to copy" class="clipboard">&#x1f4cb;</span> 
    <form class="pn-copy-form"> 
    <input class="pn-copy" type="text" value="+14105551234" /> 
    </form> 
</td> 

Wenn der Benutzer klickt auf die Zwischenablage Symbol, ich möchte den Inhalt des Benutzers Zwischenablage füllen mit „14105551234“. Allerdings merke ich, dass nichts auftaucht. Hier ist die Javascript Ich verwende, am unteren Rand der gleichen Seite platziert:

var evHandler = function(clipboardElem) { 
    return function() { 
     var pnCopy = clipboardElem.parentNode.querySelector('.pn-copy'); 
     if (pnCopy === null) { 
     return; 
     } 
     pnCopy.select(); 
     try { 
     result = document.execCommand('copy'); 
     if (result === false) { 
      throw new Error("Could not copy value: " + pnCopy.value); 
     } 
     } catch (e) { 
     console.error(e); 
     alert("Couldn't copy text, sorry. Here it is: " + pnCopy.value); 
     } 
     console.log("Copied "+ pnCopy.value + " to the clipboard"); 
     pnCopy.blur(); 
    }; 
    } 

    var clipboards = document.querySelectorAll('.clipboard'); 
    for (var i = 0; i < clipboards.length; i++) { 
    var clipboard = clipboards[i]; 
    clipboard.addEventListener('click', evHandler(clipboard)); 
    } 

ich die Form bin versteckt, da ich es auf der Seite nicht angezeigt werden soll.

.pn-copy { 
    display: none; 
} 

Warum füllt sich die Zwischenablage nicht? Funktioniert Click-to-Copy nicht mit localhost oder funktioniert nicht mit unverschlüsseltem HTTP?

Answer 1

Das Formular muss "sichtbar" sein, obwohl diese Definition locker ist, und ich denke, dass grob "nicht angezeigt wird: keine". Ohne dass dies vorhanden ist, wählt .select() keinen Text aus. Ich hatte Erfolg mit dem folgenden CSS, das den Input "sichtbar" lässt, aber 3000 Pixel vom Bildschirm entfernt.

/* the input has to be "visible", if you use display: none copy won't work. */ 
.pn-copy-form { 
    position: absolute; 
    height: 1px; 
    left: -3000px; 
}