Comment copier un INPUT ou un TEXTAREA en JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-03-12 13:53:12

Question

Comment faire pour copier le contenu d'un INPUT ou d'un TEXTAREA en JavaScript ?

Réponse

Pour copier la valeur d'un <input> ou le contenu d'un <textarea>, en JavaScript, vous pouvez utiliser la méthode writeText() de l’interface Clipboard ; elle copie le texte spécifié dans le presse-papiers du système.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Comment copier un INPUT ou un TEXTAREA en JavaScript ?</title>
  </head>
  <body>
    <textarea id="textarea">Un texte à copier</textarea>
    <button id="bouton_textarea">Copier le contenu du textarea</button>
    <br><br>
    <input type="text" id="input" value="Un texte à copier">
    <button id="bouton_input">Copier le contenu de l'input</button>
    <script>
      async function copierTexte(texte) 
      {
        try 
        {
          await navigator.clipboard.writeText(texte);
          alert('Le texte a correctement été copié');
        } 
        catch(erreur) 
        {
          alert('Erreur lors de la copie: ', erreur);
        }
      }
      document.getElementById("bouton_textarea").onclick = function() 
      {
          let texte = document.getElementById("textarea").value;
          copierTexte(texte);
      }
      document.getElementById("bouton_input").onclick = function() 
      {
          let texte = document.getElementById("input").value;
          copierTexte(texte);
      }
    </script>
  </body>
</html>

Pour obtenir d'avantage d'information sur la manière de copier un INPUT ou un TEXTAREA en JavaScript, référez vous à cette page du site de Mozilla.