Question

我无法使用execCommand（'copy'），尝试复制在多选选项中选择的值。我在“temp”中获得了价值，但是临时没有复制或进入剪贴板的价值。

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

 let cell = tableView.dequeueReusableCell(withIdentifier: "planCell",for: indexPath) as! MediaPackListCell

 cell.lblAllowAutoRenew.textColor = UIColor.white

}

Answer 1

我了解您的意图如下：您希望在选择后立即将所选选项的值复制到剪贴板。

使用document.execCommand('copy')时，您可以复制页面上选择的内容（例如段落中的内容或输入字段本身）。

然而，问题是<select>中的选择选项不被视为选定文本。更糟糕的是，如果您想通过javascript触发选择文字，则有一些限制：您只能在<input>或<textarea>元素上致电.select()。

以下是我要做的事情：将所选选项复制到单独的（不可见）输入字段，选择它并从中复制内容。

这是一个可以作为演示的小提琴：https://jsfiddle.net/Zomry/metcfvcq/13/

我会在这里分解：

首先，将此元素添加到页面中。这是输入字段，我们将内容从剪贴板复制到剪贴板。请注意，我添加了tabindex -1，因此您无法通过Tab键访问它。我还包括隐藏的咏叹调，所以屏幕阅读器知道它应该忽略这一点。

<input class='copyfrom' tabindex='-1' aria-hidden='true'>

然后通过将输入字段放在屏幕上使其不可见（如果我尝试使用display：none;或其他技巧则无效）

<style>
    .copyfrom {
        position: absolute;
        left: -9999px;
    }
</style>

然后将值复制到输入字段，选择它并复制它。

var input = document.querySelector("input.copyfrom"); // select the input field

function showpropval(val) {
    var selectedValues = getSelectValues(this); // get selected values
    input.value = test.join(','); // join them in a comma separated list
    input.select(); // select offscreen inputs text
    document.execCommand("copy"); // copy it
    this.focus(); // focus back on original, so we don't see any glitches
} 

// credits to: https://stackoverflow.com/questions/5866169/how-to-get-all-selected-values-of-a-multiple-select-box
function getSelectValues(select) {
    var result = [];
    var options = select && select.options;
    var opt;

    for (var i=0, iLen=options.length; i<iLen; i++) {
        opt = options[i];

        if (opt.selected) {
          result.push(opt.value || opt.text);
        }
    }
  return result;
}

Answer 2

我有其他案例＆＃34; copy＆＃34;命令不起作用。 ExecCommand返回true，但未复制该值。在我的情况下，问题是执行命令的函数（确切地说是Promise）。也许是一个小样本（使用Zomry的答案）：

function copyToClipboardButtonHandler_Working() {
  //copy logic executed directly here works
  showpropval('this works');
}

function copyToClipboardButtonHandler_NotWorking() {
  //copy logic executed directly here works
  myService.doSomeLogicAndReturnPromiseWithAString().then(text =>
     showpropval(text) /*this does NOT work'*/
  );
}

如果我正确解释，必须在人类调用的相同脚本执行迭代中调用命令。由于Promise的回调是在其他迭代中，浏览器否认它（虽然它说它没有）。我不知道这是否属实，但代码对我有用，这很好;）

Answer 3

好吧，我的方法稍微容易一些：

使用“text”类型创建额外输入
将所选选项的值复制到额外的字段
给出额外的字段位置绝对和左-9999所以它存在于 dom但不在可见的视口中！
做其余的事！

这是一个例子：

function copyUserName() {

    //just_for_copy is my invisible extra field
    document.getElementById('just_for_copy').value = document.getElementById('user_phone').value;

    var justForCopy = document.getElementById('just_for_copy');

    justForCopy.select();

    document.execCommand("copy");
}

Answer 4

  function CopyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).text()).select();
      document.execCommand("copy", false, $temp.val());
      $temp.remove();
  }

Answer 5

没有直接关系，但似乎是个好地方。使用document.execCommand（）时，用于提供“文本”的元素必须在页面上可见。所以使用display：none;尝试使元素高度：0;也会导致失败。宽度：0;也会破坏此功能。我解决了这个问题，但是将元素定位为绝对并将其移离屏幕很远。

希望这对某人有帮助：-）

Answer 6

在 2021 年，当与 Internet Explorer 的兼容性最终（几乎）变得无关紧要时，最简单的解决方案是：

function copyToClipboard(value) {
  navigator.clipboard.writeText(value)
}

Answer 7

试试这个：

function showpropval(val) {
    var temp = val;
    document.execCommand("copy",false,val);
}

JavaScript execCommand（'copy'）不起作用

7 个答案: