【解決方法】独自のボタンでテキストエリアをコピーする


独自のボタンでテキストエリアのコンテンツをコピーするためにこのコードを書きますが、最初のテキストエリアだけがコピーされるという問題があります

HTML
<pre><body>


<textarea class="form-control" tabindex="0">something</textarea>
 <button  onclick="myFunction()">clickme</button>
<textarea class="form-control"tabindex="3" >something1</textarea>
 <button  onclick="myFunction()">clickme</button>
<textarea class="form-control" >something2</textarea>

  <button onclick="myFunction()">clickme</button>
  


  <script>
   var copyText = document.getElementsByClassName("form-control")[0];
 function myFunction() {

		
  // Get the text field
 

  // Select the text field
  copyText.select();
  copyText.setSelectionRange(0, 99999); // For mobile devices

   // Copy the text inside the text field
  document.execCommand("copy");

  // Alert the copied text
  alert("Copied the text: " + copyText.value);
  
  ///second
  
  
} 
  </script>
</body>

しかし、ボタンは最初のテキストエリアのみをコピーします

あなたはコードを試すことができ、あなたは私の問題を理解しています
どうもありがとう

私が試したこと:

最初のテキストエリアボタンの問題をコピー

解決策 1

イベント ハンドラー内からコピーする要素への参照を取得する必要があります。

この質問のコピーのマークアップに基づいて、要素はボタンの直前の兄弟です。 したがって:

HTML
<textarea class="form-control" tabindex="0">something</textarea>
<button type="button" class="copy-button">clickme</button>
<textarea class="form-control"tabindex="3" >something1</textarea>
<button type="button" class="copy-button">clickme</button>
<textarea class="form-control" >something2</textarea>
<button type="button" class="copy-button">clickme</button>
JavaScript
document.addEventListener("click", e => {
    let button = e.target;
    if (button.tagName !== "BUTTON") { button = button.closest("button"); }
    if (!button || !button.classList.contains("copy-button")) { return; }
    
    e.preventDefault();
    
    let textarea = button.previousElementSibling;
    while (textarea && textarea.tagName !== "TEXTAREA") {
        textarea = textarea.previousElementSibling;
    }
    
    if (!textarea) {
        alert("Unable to find the textarea to copy!");
        return;
    }
    
    textarea.select();
    textarea.setSelectionRange(0, 99999);
    document.execCommand("copy");
    alert(`Copied the text: ${textarea.value}`);
});

デモ[^]

コメント

タイトルとURLをコピーしました