为什么不是文档.导致剪贴板填充的execCommand

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

本文关键字：填充 execCommand 剪贴板 文档 为什么不      更新时间：2023-09-26

我有以下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上不起作用?

表单需要是"可见的"，虽然这个定义是宽松的，我认为大致是"不显示:无"。如果没有这个，.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;
}
相关文章：