JavaScript : surlignez le texte dans la zone de texte et copiez-le dans le presse-papiers

Lorsque je cherche des solutions pour les sites Web de mes clients, je tombe toujours sur des extraits de code qui sont généralement très utiles. Pour que je puisse aussi me souvenir d'eux, ils reçoivent simplement un article sur mon blog.

Copiez le contenu des champs du formulaire dans le presse-papiers à l'aide d'un bouton

Dans le cas présent, le site web en question dispose d'un formulaire avec une zone de texte constituée d'un code TEXTAREA. Ce champ de texte contient de nombreuses lignes de données que le visiteur doit sélectionner puis copier lui-même dans le presse-papiers. Pour faciliter cette étape, je voulais ajouter un bouton qui sélectionne tout dans le champ de texte en une seule fois, puis le copie directement dans le presse-papiers.

Extrait de code Javascript

Le tout est résolu via un Javascript, qui reprend la fonction du bouton. Pour ce faire, utilisez la commande select () pour sélectionner le texte dans l'élément textarea, puis execCommand('copy' pour copier le texte. Cela fonctionne assez bien dans les navigateurs plus récents.

Si vous utilisez déjà la bibliothèque jQuery, vous pouvez utiliser ce code :

$("button").click(function(){
    $("textarea").select();
    document.execCommand('copy');
});

Si vous n'avez pas jQuery en cours d'exécution sur le site Web, vous pouvez utiliser ce code ici :

document.querySelector("button").onclick = function(){
  document.querySelector("textarea").select();
  document.execCommand('copy');
};

Le code HTML du bouton et du champ de formulaire doit alors être conçu comme ceci :

<button>Auswählen und kopieren</button>
<br/>
<textarea></textarea>

J'espère que cela fonctionnera aussi bien pour vous que pour moi. Les navigateurs plus anciens peuvent parfois causer des problèmes, mais je pense que la plupart d'entre eux ont des versions actuelles au départ. Si vous avez des extraits de code utiles, faites-le moi savoir. Je suis toujours ravi des nouveaux extraits de code utiles pour HTML, JavaScript ou PHP.

Jen Kleinholz( Fondateur & Monsieur Apfelot )

Jens dirige le blog depuis 2012. Il agit comme Sir Apfelot pour ses lecteurs et les aide avec des problèmes de nature technique. Dans ses temps libres, il fait du monocycle électrique, prend des photos (de préférence avec l'iPhone, bien sûr), grimpe dans les montagnes de Hesse ou fait des randonnées en famille. Ses articles traitent des produits Apple, de l'actualité du monde des drones ou encore des solutions aux bugs actuels.