web-dev-qa-db-ja.com

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>
javascriptexeccommand
4
Rajesh k

あなたの意図が次のとおりであることを理解しています。選択したオプションの値を、選択したらすぐにクリップボードにコピーします。

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

ただし、<select>でオプションを選択しても、選択されたテキストとは見なされないことが問題です。さらに悪いことに、JavaScriptを介してテキストの選択をトリガーしたい場合、いくつかの制限があります：<input>または<textarea>要素でのみ 。select（） を呼び出すことができます。

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

デモとして使用できるフィドルは次のとおりです： https://jsfiddle.net/Zomry/metcfvcq/13/

ここで分解します。

まず、この要素をページに追加します。これは、コンテンツをクリップボードにコピーする入力フィールドです。 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;
}
4
Zomry

function CopyToClipboard（element）{

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




        }
1
Hina Azhar

「コピー」コマンドが機能しない別のケースがありました。 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のコールバックは他のイテレーションにあるため、ブラウザーはそれを拒否します（そうではないと言います）。これが本当かどうかはわかりませんが、コードは私にとってはうまくいきます;）

1
Sielu

わかりました、私のアプローチは少し簡単です：

  1. タイプ「テキスト」の追加入力を作成します
  2. 関数呼び出しで、選択したオプションの値を追加フィールドにコピーします
  3. 追加のフィールド位置を絶対と左-9999にして、domには存在するが可視のビューポートには存在しないようにします！
  4. 残りをやってください！

ここに例があります：

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");
}
1
Alireza Noori

これを試して：

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

直接関係はありませんが、これを言うのに良い場所のようです。 document.execCommand（）を使用する場合、「テキスト」を提供するために使用されている要素がページに表示されている必要があります。したがって、ディスプレイを使用する：なし。要素の高さを0にしようとしても失敗します。幅：0;この機能も無効になります。私はこれを手に入れましたが、要素を絶対的に配置し、画面から遠くに移動しました。

これが誰かを助けることを願っています:-)

0
john