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>

当用户点击剪贴板图标时，我想用＆＃34; + 14105551234＆＃34;填充用户系统剪贴板的内容。但是，我注意到没有任何东西填充。这是我使用的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;
}

为什么剪贴板不会填充？点击复制不能在localhost上工作，还是不能在未加密的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;
}

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

1 个答案: