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

プログラミングQA

2022.12.01

[ad_1]

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

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