爲什麼不是document.execCommand導致剪貼板填充？

Question

我有以下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> 

當剪貼板圖標的用戶點擊，我想用「14105551234」來填充用戶的系統剪貼板的內容。但是，我注意到沒有填充。下面是JavaScript的我使用的，放置在同一頁面的底部：

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

我躲在形式，因爲我不希望它出現在頁面上。

.pn-copy { 
    display: none; 
} 

爲什麼剪貼板不填充？點擊複製不能在本地主機上工作，還是不能在未加密的HTTP上工作？

Answer 1

表單需要「可見」，儘管該定義很寬鬆，我認爲它大致是「不顯示：無」。沒有這個地方，.select()沒有選擇任何文字。我用下面的CSS取得了成功，它使輸入「可見」，但放置在屏幕外3000像素。

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