Copy to clipboard in JavaScript

Objectifs du blog

Après la lecture de ce blog, vous serez en mesure de savoir comment les données peuvent être copiées dans le presse-papier à l’aide du script java.

Avantage de la fonctionnalité de copie dans le presse-papier

Dans le monde Web actuel, il s'agit de l'utilisateur expérimenté depuis votre site. Au cours de notre travail sur n'importe quel site, nous copions le contenu d'un endroit et le collons à un autre endroit. Il sera vraiment utile à l'utilisateur si un site donne une fonctionnalité de clic à copier. Il enregistre le temps et les efforts de l'utilisateur pour sélectionner et copier le contenu.

Implémentation de la fonctionnalité de copie dans le presse-papier

Voyons comment nous pouvons ajouter cette fonctionnalité:

Étape 1 :

Créez un code HTML avec un paragraphe contenant du contenu et un bouton sur lequel cliquer. Vous pouvez utiliser n’importe quel élément pertinent au lieu d’un paragraphe, par exemple zone de texte, zone de texte, champs masqués, etc.

<body> <p id = "txt_knoband"> KnowBand se vante des meilleurs plug-ins du secteur pour les systèmes de commerce électronique et possède des années d'expérience dans l'utilisation de sites Web de commerce électronique. </ p> <button onclick = "onClickCopy ()"> Copier le texte < / bouton> </ body>

Étape 2 :

Vous devrez créer une fonction onClickCopy () qui copiera les données du paragraphe. La fonction exécutera simplement "document.execCommand (" copy ")" pour copier les données dans le presse-papiers.

function copyOnClick () {var tempInput = document.createElement ("entrée"); tempInput.value = document.getElementById ("txt_knoband"). innerHTML; document.body.appendChild (tempInput); tempInput.select (); document.execCommand ("copie"); document.body.removeChild (tempInput); alert ("valeur copiée"); }

In the last line of the script, we have simply added an alert action to inform the user that the data has been copied.

So finally when you click on the button “Copy Text”, data will be copied to the clipboard and you can simply paste by using CRTL + V.

Related Article: Comment définir Cookie en utilisant JavaScript


Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Leave a Reply

Your email address will not be published. Required fields are marked *