Rendre copiables des objets HTML

Rendre les objets HTML copiables

26/08/2021

HTML
CSS
JS
Technique
article illustration

Il est parfois utile re récupérer le contenu d'un champ HTML, comme si l'on copiait le contenu d'une cellule sur excel, il est alors interessant d'avoir un simple clic à effectuer sur celui-ci.

Le simple ajout d'une classe pourrait bien permettre de faciliter la récupération de contenu sur vos objets HTML.

De cette manière, tous les éléments avec la classe copyable pourront, d'un simple click être récupérés.

Un objet temporaire tempInput est créé, car seuls les inputs peuvent être sélectionnés. Par la suite la valeur du innerHTML de l'objet à copier y est inséré.

Celui est ensuite sélectionné dans le presse-papier.

Chaque élément copiable est identifié par un encart noté d'une 💾 afin d'être facilement identifié et change de couleur lors de la copie.

A retenir

Seuls les inputs peuvent être sélectionné via JS.

L'utilisation d'un input temporaire est la solution la plus discrète pour effectuer une copie.