为什么 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

形式需要 "visible,"，虽然这个定义很松散，我认为大致是 "not display:none"。如果没有它，.select() 将不选择任何文本。我在以下 CSS 中取得了成功，它保留了输入 "visible"，但在屏幕外放置了 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;
}

为什么 document.execCommand 没有导致剪贴板填充？

Why isn't document.execCommand causing the clipboard to populate?

html

javascript

css

clipboard