JavaScript execCommand（'copy'）不工作

我无法使用execCommand“copy”，尝试复制在“多选”选项中选择的值。iam在temp中获取值，但在temp中获取的值未复制或进入剪贴板

{
        $propArr=array_unique($properties);
        echo "<div class='table-responsive'>";
            echo "<table class='bordered'>";
            foreach($propArr as $keyProp =>$val){
                echo "<tr>";
                    echo "<td>$val</td><td>";
                    echo "<select name='propval' id='propval' onclick='showpropval(this.value);' class='form-control' multiple>";
                    foreach($values as $k => $v){
                        if($val==$k){
                            foreach($v as $kv =>$fval){
                                echo "<option value='$fval'>$fval</option>";
                            }
                        }
                    }
                    echo "</select>";
                    echo"</td>";
                echo "</tr>";
            }
            echo "</table>";
        echo "</div>";
        }

<script>
        function showpropval(val)
        {
            var temp = val;
            temp.execCommand("copy");

        }
    </script>

试试这个：

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

---

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

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

但问题是，在文本中选择选项并不被视为已选择。更糟糕的是，如果您想触发通过javascript选择文本，则有一些限制：您只能调用或元素

下面是我要做的：将所选选项复制到一个单独的不可见输入字段，选择它并从中复制内容

这里有一把小提琴可以作为演示：

我将在这里详细介绍：

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

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

然后将输入字段从屏幕上移开，使其不可见。如果我尝试显示，则不起作用：无；或者其他的把戏

<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;
}

---

我还有另一个复制命令不起作用的例子。ExecCommand返回true，但未复制该值。在我的例子中，问题是执行命令的函数，确切地说是一个承诺。可能是使用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的回调在另一个迭代中，所以浏览器拒绝了它，尽管它说并没有。我不知道这是不是真的，但代码对我来说是有效的，这很好

好的，我的方法简单一点：

使用“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");
}

---

没有直接关系，但似乎是一个很好的地方说这一点。使用document.exece命令时，用于提供文本的元素必须在页面上可见。所以使用显示：无；将导致此操作失败，同时尝试使元素高度为0；宽度：0；也会破坏此功能。我绕过了这个问题，但将元素定位为绝对元素，并将其移动到远离屏幕的位置

---

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

多亏了@Zomry，我在Angular 9上修改了您对Typescript的响应，以下是：

CopyColorCode:字符串{ //复制剪贴板的功能 const colorchicked=this.findColorObjectcolorCode； const copyText=document.getElementById`${colorchicked.id}`作为HTMLInputElement； copyText.select； document.execCommand'copy'； } .输入颜色{ /*可见性：隐藏； 高度：0px*/ 位置：绝对位置； 左：-9999px； } {{color.name}

{{color.color}

---

2021年，当与Internet Explorer的兼容性最终几乎不相关时，最简单的解决方案是：

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

---

很好，非常感谢。得到了预期的结果。可能取决于浏览器。当时我用最新版本的Chrome进行了测试。您正在尝试什么浏览器？非常感谢您为我们节省了宝贵的时间：\

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