Bouton Javascript avec texte prédéfini

Question

Je travaille sur un projet d'automatisation de copie de texte. Cependant, ce que je voudrais faire, c'est juste avoir un bouton sur lequel l'utilisateur peut cliquer pour mettre un texte spécifié dans le presse-papiers.

Je suis capable de le faire maintenant en copiant du texte à partir d'une zone de texte, cependant, j'essaie de supprimer le besoin d'une zone de texte et j'ai juste un bouton.

Une fois pressé, il mettra du texte dans le presse-papiers en fonction de la valeur des boutons. Par exemple, l'extrait ci-dessous a une zone de texte que le bouton copiera. Je veux avoir juste le bouton, pas de zone de texte, et une fois pressé, il copiera le nom du bouton pour le presse-papiers

<textarea id="alu1" rows="1" border="none" style="width:70%; height: 10px"> 
 
ssh -l admin:admin x.x.x.x 
 
</textarea> 
 
<button id="alu1copy" style="width: 50px; height: 20px">ssh -l admin:admin x.x.x.x</button> 
 
<script> 
 
var input1 = document.getElementById("alu1"); 
 
var button = document.getElementById("alu1copy"); 
 
button.addEventListener("click", function (event) { 
 
     event.preventDefault(); 
 
     input1.select(); 
 
     document.execCommand("copy"); 
 
    }); 
 
</script>

Answer 1

Cela fonctionnera. Il est adopté à partir this example:

var copyBtn = document.getElementById('alu1copy'); 
 

 
copyBtn.addEventListener('click', function(event) { 
 
    var range = document.createRange(); 
 
    range.selectNode(copyBtn); 
 
    window.getSelection().addRange(range); 
 
    try { 
 
    var successful = document.execCommand('copy'); 
 
    var msg = successful ? 'successful' : 'unsuccessful'; 
 
    console.log('Copy command was ' + msg); 
 
    } catch(err) { 
 
    console.log('Unable to copy', err); 
 
    } 
 
    window.getSelection().removeAllRanges(); 
 
});

<button id="alu1copy">I will be copied</button>

Voici un CodePen Demo.

---

Mise à jour: HTML avec JavaScript en ligne

<button id="alu1copy">Copy me now</button> 
 

 
<script> 
 
    var copyBtn = document.getElementById('alu1copy'); 
 

 
    copyBtn.addEventListener('click', function(event) { 
 
    var range = document.createRange(); 
 
    range.selectNode(copyBtn); 
 
    window.getSelection().addRange(range); 
 
    try { 
 
     var successful = document.execCommand('copy'); 
 
     var msg = successful ? 'successful' : 'unsuccessful'; 
 
     console.log('Copy command was ' + msg); 
 
    } catch (err) { 
 
     console.log('Unable to copy', err); 
 
    } 
 
    window.getSelection().removeAllRanges(); 
 
    }); 
 
</script>

---

Si vous avez besoin quelque chose de plus complet, le code de this answer fonctionne aussi bien.

Answer 2

Si vous voulez que le texte d'un bouton, il suffit d'utiliser

var elem = document.getElementById("alu1copy"); 
var txt = elem.textContent || elem.innerText; 

Answer 3

<script> 
var input1 = document.getElementById("alu1"); 
var button = document.getElementById("alu1copy"); 
button.addEventListener("click", function (event) { 
     event.preventDefault(); 
     input1.innerHTML = e.target.textContent; 
    }); 
</script> 

Answer 4

<textarea id="alu1" rows="1" border="none" style="width:70%; height: 10px"> 
 
ssh -l admin:admin x.x.x.x 
 
</textarea> 
 
<button id="alu1copy" style="width: 50px; height: 20px">ssh -l admin:admin x.x.x.x</button> 
 
<script> 
 
var input1 = document.getElementById("alu1"); 
 
var button = document.getElementById("alu1copy"); 
 
button.addEventListener("click", function (event) { 
 
     event.preventDefault(); 
 
      button.innerText = input1.value; 
 
     document.execCommand("copy"); 
 
    }); 
 
</script>