JavaScript execCommand（ 'copy'）が動作しない

Question

複数選択オプションで選択されている値をコピーしようとしているのに、execCommand（ 'copy'）を使用できません。 iamは "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> 

Answer 1

は、私はあなたの意図は以下であることを理解して：あなたはできるだけ早くあなたがそれを選択してクリップボードに選択したオプションの値をコピーします。

document.execCommand('copy')を使用すると、ページで選択されたもの（段落内の内容や入力フィールド自体など）をコピーします。

しかし、キャッチは、<select>のオプションの選択は選択されたテキストとはみなされません。さらに悪いことに、javascriptを使用してテキストを選択してトリガーしたい場合、いくつかの制限があります：<input>または<textarea>要素でのみ.select()に電話することができます。

ここでは、選択したオプションを別の（表示されていない）入力フィールドにコピーして選択し、そこからコンテンツをコピーします。

ここ

はデモとしての役割を果たすことができますフィドルです：https://jsfiddle.net/Zomry/metcfvcq/13/

私はここでそれを打破ウィル：

まず、ページにこの要素を追加します。これは、コンテンツをクリップボードにコピーする入力フィールドです。 tabindex -1を追加したので、タブキーでは到達できないことに注意してください。私はまた、スクリーンリーダーがこれを無視すべきであることを知っているので、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; 
} 

Answer 2

これを試してみてください：

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

Answer 3

「コピー」コマンドが動作しないケースがありました。 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'*/ 
); 
} 

を私が正しく解釈した場合、コマンドは、それは人間によって呼び出された反復の同じスクリプトの実行中に呼び出されることがあります。プロミスのコールバックは他の反復であるため、ブラウザはそれを拒否します（そうではありませんが）。これが本当かどうかわかりませんが、コードは私のために動作しますが、これは問題ありません;）