3 votes

Comment faire en sorte que mon texte copié JS soit écouté par plus d'un bouton ?

Comment faire fonctionner le JS pour des boutons de copie multiples ? Par exemple, imaginez 5 articles dans un flux de pages, chacun avec son propre bouton de copie. Pour l'instant, cela ne semble fonctionner que pour le premier bouton de la page, et les autres boutons ne font rien.

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>

JS :

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";
}

4voto

farhodius Points 470

L'utilisation d'identifiants dynamiques est la meilleure solution, mais il en existe une autre, un peu plus complexe. Elle consiste à utiliser des objets d'événement. Vous devez placer votre champ de saisie et le bouton sous le même élément parent. Vous pouvez alors parcourir le DOM en vous basant sur l'élément cible de l'événement, trouver un parent commun pour votre bouton et votre champ de saisie, puis trouver le champ de saisie dans les nœuds enfants du parent commun. Quelque chose comme ça :

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>

1voto

Ken Lee Points 2772

Si vous avez plusieurs boutons, vous pouvez utiliser des identifiants différents et les transmettre au JS

Par exemple, si vous avez deux boutons, alors :

<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>

0voto

linchong Points 369

Vous devez utiliser addEventListener() pour plusieurs boutons de copie

<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()
})

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X