javascript - mozilla firefox中复制到剪贴板纯javascript函数

Question

我需要制作一个可以在每个页面和浏览器上运行的按钮，可以从文本区域复制输入。我正在尝试使用以下函数来做到这一点:

 selectElementContents: function(){
      el = document.getElementById("tag_text");

      var range = document.createRange();
      range.selectNode(el);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);

      try {
        var successful = document.execCommand('copy');
      } catch(err) {
        console.log('Oops, unable to copy');
      }

目前，该功能在除 Firefox 和 Safari 之外的所有浏览器上运行良好。我读了一些关于 Safari 的文章，似乎它不支持这样的功能，还是我弄错了？但是，当我尝试使用 document.execCommand('copy') 复制输入内容时，它会抛出以下错误: [Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: debugger eval code :: <TOP_LEVEL> :: line 1" data: no] 。我查了一下这个错误，它是一种通用错误，因为代码中出现了不止一种错误。

最后我的问题是如何让它在 Firefox 上运行以及出了什么问题？

Answer 1

遗憾的是，并非所有地方都支持 execCommand('copy')。它也不是很安全，因为它会将内容放入剪贴板而不提醒用户。

无论如何，您都可以将 execCommand('copy') 与此 answer 中提供的解决方案结合起来。对于像这样不受支持的浏览器:

HTML:

<form id="test_form">
  <p>Copy this:</p>
  <input id="tag_text" type="text" size="40" />
  <input type="button" onClick="select_element_contents()" value="Copy" />
</form>

Javascript:

function select_element_contents (){
    var el = document.getElementById("tag_text");
    var el_text = el.value;

    var range = document.createRange();
    range.selectNode(el);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);

    try {
        var successful = document.execCommand('copy');
    } catch(err) {
        window.prompt("Copy to clipboard: Ctrl+C/Cmd+C, Enter", el_text);
    }
}

当然，这并不理想，但由于 Mozilla Firefox 不支持自动复制到剪贴板，因此用户必须按下按钮。最好让它尽可能透明。