JavaScript execCommand ('copy' ) 不起作用

我无法使用 execCommand('copy')，试图复制在多选选项中选择的值。我在“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>

最佳答案

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

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

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

这是我要做的:将选定的选项复制到一个单独的(不可见的)输入字段，选择它并从中复制内容。

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

我将在这里分解它:

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

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

关于JavaScript execCommand ('copy' ) 不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45117731/