Comment créer le bouton «Copier dans le presse-papiers» dans JavaScript

JavaScript est un langage de programmation Web qui rend notre site Web interactif en lui donnant la possibilité de penser et d'agir. Le bouton Copier sur le presse-papiers est une nécessité dans de nombreux sites Web par exemple si vous avez développé un site Web qui paraphrase vos phrases, ou si votre site Web est un dissolvant de plagiat, ou c'est un champ de texte simple qui permet à l'utilisateur d'écrire des données en ligne. Pour améliorer l'expérience utilisateur, les sites Web qui fournissent des informations et ces informations sont requises dans d'autres sections du site Web, le site Web nécessite la copie du bouton Copper à presse. Ainsi, en regardant toutes ces utilisations, mettons en œuvre un programme JavaScript qui répondra à la question de savoir comment créer le copier dans le presse-papier bouton en javascript.

Html

HTML est un langage hypertexte de balisage qui donne de la structure à notre site Web. Nous utiliserons HTML pour créer un champ de saisie qui sera utilisé par l'utilisateur pour entrer un texte. Ensuite, un bouton sera créé qui, une fois cliqué, copiera tout ce qui se trouve dans le champ de saisie. En fin de compte, nous utiliserons une balise de script pour référencer le fichier JavaScript qui a du code JavaScript:

Copie

Nous avons utilisé le identifiant Attribut dans la balise d'entrée afin que nous puissions le référencer plus tard à partir du fichier JavaScript. Nous avons également initialisé le sur clic événement qui signifie chaque fois que l'utilisateur clique sur le copie bouton, le handleclick () La fonction fonctionnera.

Javascrip

Nous avons initialisé une fonction avec le nom de handleclick () afin que chaque fois que l'utilisateur clique sur le bouton Copie, le code de cette fonction commencera à exécuter. À l'intérieur de la fonction, en utilisant l'attribut ID du champ de saisie, nous avons référencé le champ de saisie et connecté .Valeur à la fin afin que la valeur du champ de saisie soit stockée dans l'entrée de la variable. Maintenant que nous avons la valeur du champ de saisie, copie la valeur dans le presse-papiers à l'aide du navigateur.presse-papiers.Fonction écrite () où nous passons la variable d'entrée en tant que paramètre. Le texte de la variable d'entrée est maintenant copié dans le presse-papiers. En fin de compte, nous alerter la variable d'entrée.

fonction handleclick ()
/ * Enregistrer la valeur de MyText pour saisir la variable * /
Var entrée = document.GetElementByid ("MyText").valeur;
/ * Copiez le texte à l'intérieur du champ de texte * /
navigateur.presse-papiers.writeText (entrée);
alert ("Texte copié:" + entrée);

Nous avons entré le texte Copier dans l'article du presse-papiers dans le champ de saisie et maintenant nous cliquerons sur le copie bouton. Nous verrons une alerte montrant le texte copié:

Allez dans une nouvelle fenêtre ou un fichier Word et appuyez sur Ctrl + v qui colleront le Copier dans l'article du presse-papiers Dans cette fenêtre.

Conclusion

Le bouton de copie du presse-papiers est très pratique lorsque vous créez un site Web qui utilise des informations d'une section à une autre, améliorant l'expérience utilisateur. Copier sur le bouton du presse-papiers est également un projet pour un débutant qui veut pratiquer ses compétences en JavaScript.

Dans cet article, nous avons implémenté la copie sur le bouton du presse-papiers en JavaScript avec des captures d'écran et un GIF.