javascript関数は、例の最初の入力ボックスに対してのみ機能します

Question

入力ボックス内に$ dataの行を表示しています。以下のjavascript関数は、入力ボックスをクリックすると入力値をクリップボードにコピーします。問題は、関数が最初の入力ボックスに対してのみ機能し、後続のエコーボックスには機能しないことです。私は、各入力ボックスに一意のIDを割り当てる必要があると思いますが、これを行う方法がわかりません。

// for each row it is echoing the following: 

echo '<input id="copy-text" type="text" value="'.$data.'" size="50">'; 

<script> 
document.getElementById("copy-text").onclick = function() { 
    this.select(); 
    document.execCommand('copy'); 
} 
</script> 

Answer 1

IDは常に一意である必要があります。同じ値を持つ複数のIDを持つ場合、javascriptはそのIDとの最初の一致を探し、残りをスキップします。

echo '<input class="copy-text" type="text" value="'.$data.'" size="50">'; 

そして、これらすべての要素とバインドを見つけ、単一のスクリプトタグを持っている：

あなたはそれぞれの行をループしている場合は、要素にクラスを与えるこの

echo '<input id="copy-text_'.$i'" type="text" value="'.$data.'" size="50" onclick="copy($i)">'; 

<script> 
    function copy(index) { 
      var elem = document.getElementById("copy-text_" + index); 
      elem.select(); 
      document.execCommand('copy'); 
    } 
</script> 

Answer 2

のようなインデックスを使用しますそれらへのイベントハンドラ：

function handler() { 
    this.select(); 
    document.execCommand('copy'); 
} 

Array.from(document.querySelectorAll('.copy-text')) 
    .forEach(function(element) { 
    element.addEventListener(handler); 
    });