Bagaimana cara membuat JS berfungsi untuk banyak tombol salin? Misalnya, pikirkan seperti 5 posting di feed halaman, masing-masing dengan tombol salin sendiri. Untuk saat ini sepertinya hanya berfungsi untuk tombol pertama di halaman, dan tombol lainnya tidak melakukan apa-apa.

HTML/PHP:

<input type="text" value="<?php the_permalink();?>" id="myInput">

<div class="copytooltip">
<button onclick="myFunction()" onmouseout="outFunc()">
  <span class="copytooltiptext" id="myCopyTooltip">Copy to clipboard</span>
  Copy text
  </button>
</div>

J:

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
  
  var tooltip = document.getElementById("myCopyTooltip");
  tooltip.innerHTML = "Copied: " + copyText.value;
}

function outFunc() {
  var tooltip = document.getElementById("myCopyTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}
3
juliancorp 14 Januari 2021, 04:44

3 jawaban

Jawaban Terbaik

Jika Anda memiliki beberapa tombol, Anda dapat menggunakan ID yang berbeda dan meneruskan ke JS

Misalnya, jika Anda memiliki dua tombol, maka:

<input type="text" value="OK 1" id="myInput(1)">

<div class="copytooltip">
<button onclick="myFunction(1)" onmouseout="outFunc(1)">
  <span class="copytooltiptext" id="myCopyTooltip(1)">Copy to clipboard</span>
  Copy text
  </button>
</div>


<input type="text" value="OK 2" id="myInput(2)">

<div class="copytooltip">
<button onclick="myFunction(2)" onmouseout="outFunc(2)">
  <span class="copytooltiptext" id="myCopyTooltip(2)">Copy to clipboard</span>
  Copy text
  </button>
</div>

<script>
function myFunction(var1) {
  var copyText = document.getElementById("myInput(" + var1 + ")");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
  
  var tooltip = document.getElementById("myCopyTooltip(" + var1 + ")");
  tooltip.innerHTML = "Copied: " + copyText.value;
}

function outFunc(var1) {
  var tooltip = document.getElementById("myCopyTooltip(" + var1+  ")");
  tooltip.innerHTML = "Copy to clipboard";
}

</script>

1
Ken Lee 14 Januari 2021, 02:07

Menggunakan ID dinamis adalah cara yang harus dilakukan, tetapi ada opsi lain yang sedikit lebih kompleks. Ini melibatkan penggunaan objek acara. Anda harus meletakkan bidang input Anda bersama dengan tombol di bawah elemen induk yang sama. Kemudian Anda dapat melintasi DOM berdasarkan elemen target acara, temukan induk umum untuk tombol dan bidang input Anda, lalu temukan bidang input di Node turunan dari induk umum. Sesuatu di sepanjang baris ini:

function myFunction(event) {
  const commonParent = event.currentTarget.parentElement;
  let inputElement = null;
  for (node of commonParent.childNodes) {
    if(node instanceof HTMLInputElement) {
        inputElement = node;
      break;
    } 
  }
 
  inputElement.select();
  inputElement.setSelectionRange(0, 99999);
  document.execCommand("copy");
  
  event.currentTarget.innerText = `Copied: ${inputElement.value}`;
}

function outFunc(event) {
    event.currentTarget.innerText = "Copy to clipboard";
}
<div class="post-wrapper">
  <input type="text" value="Value 1" id="myInput">
  <br>
  <button onclick="myFunction(event)" onmouseout="outFunc(event)">
    Copy to clipboard
  </button>
</div>

<div class="post-wrapper">
  <input type="text" value="Value 2" id="myInput">
  <br>
  <button onclick="myFunction(event)" onmouseout="outFunc(event)">
    Copy to clipboard
  </button>
</div>
4
farhodius 14 Januari 2021, 03:32

Anda perlu menggunakan addEventListener() untuk beberapa tombol salin

<button class="btn">
  <span class="copytooltiptext" id="myCopyTooltip">Copy to clipboard</span>
  Copy text
</button>
document.querySelector('.btn').addEventListener('mouseout', function(e) {
      outFunc()
})

document.querySelector('.btn').addEventListener('click', function(e) {
      myFunction()
})
0
linchong 14 Januari 2021, 02:04