Rendre copiables des objets HTML

Rendre les objets HTML copiables

26/08/2021

HTML

CSS

Technique

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.

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Copy example</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<h1 class="copyable">Awesome content</h1>
	<h2 class="copyable">Hard code to remind or select :</h2>
	<p class="copyable">fer5 51ge 1erg84ezr 5vdz64fv86e 7trh8e1v4 568gr42185ver74g174g85et7124v5fedgvedf 45gfe4g 12</p>

	<script>
	function Clipboard_CopyTo(value) {
	var tempInput = document.createElement("input");
	tempInput.value = value;
	document.body.appendChild(tempInput);
	tempInput.select();
	document.execCommand("copy");
	document.body.removeChild(tempInput);
	}

	function copy(element) {
	{
	Clipboard_CopyTo(element.innerHTML)
	}
	}

	document.querySelectorAll(".copyable").forEach(element => element.addEventListener("click", function () {
	{
	copy(element)
	}
	}));
	</script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

	.copyable {
	display: inline-flex;
	transition: 1s;
	width: 100%;
	}

	.copyable ::after {
	content: '💾';
	margin-left: auto;
	border-left: 1.7px solid #000;
	height: auto;
	padding: 0.5em 0.7em 0.5em 1em;
	}

	.copyable:active {
	background-color: greenyellow;
	transition: cubic-bezier(0.4, 0, 1, 1) 0.1s;
	color: black;
	}

view raw style.css hosted with ❤ by GitHub

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.