Oxygenados La comunidad hispana
post oxygen builder
Logo Oxygenados

Botón para copiar

¿Cómo puedes hacerlo?

Con un poco de código podemos hacer el típico botón que nos permite pasar al porta-papeles o lo que es lo mismo, copiar un texto; este texto puede estar oculto o visible y podrá ser código o texto plano.

Esto es un ejemplo

Lorem ipsum dolor sit amet

COPIAR

Aquí vamos a pegar el lorem

1  Añadir un elemento Code Block.

2 En el bloque JavaScript pegar este código.

jQuery(document).ready(function($) {
	
	var tooltip = document.getElementById("elTooltip");
	tooltip.innerHTML = "Copiar";
	$('#boton').on('mouseout', function(e) {
		tooltip.innerHTML = "Copiar";
	});
	
	$('#boton').on('click', function(e) {
		e.preventDefault();
		
		/*** Tomar el valor del texto ****/
		var elTexto = document.getElementById('aCopiar').innerHTML;
		
		/* Texto al porta-papeles */
		navigator.clipboard.writeText(elTexto);
		
		tooltip.innerHTML = "Copiado" ;
	});
});

Click para Copiar
Copiado

2 En el bloque CSS pegar este código.

.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	align-items:center;
	visibility: hidden;
	width: 75px;
	height:35px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 7px 5px;
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
	margin-left: -75px;
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 14px;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}
Click para Copiar
Copiado

3 Añadir un elemento DIV y ponerle la clase "tooltip".  

4 Dentro del elemento DIV anterior añadir un segundo elemento DIV al que le daremos la ID "elTooltip" y  la clase "tooltiptext".

5 Añadir un botón al que se pondrá "boton" de ID y que también estará dentro del primer elemento DIV.

6 Al elemento de texto que vayamos a utilizar para que sea copiado le daremos la ID "aCopiar" y el texto que contenga será el que se quedará copiado en el portapapeles.

Se le puede dar cualquier formato y clase a cualquier elemento siempre y cuando se respeten las instrucciones anteriores.
5 2 votos
Article Rating
Suscribir
Notificar de
guest
1 Comment
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios
Luis Felipe
Luis Felipe
9 días hace

Excelente y fácil de hacer 👏🏻👏🏻👏🏻

OTROS TIPS

Burbuja que sigue al cursor

Un efecto de seguimiento del cursor con solo código.

Leer más
Año Copyright dinámico

Hacer que el año del copyright, generalmente colocado en el footer, se actualize de manera automática. Mostramos tres maneras de hacerlo.

Leer más
Duplicar entradas y páginas

Con este tip y sin necesidad de plugin nos vamos a proveer de una autentica maravilla que nos permitirá duplicar muy facilmente entradas y páginas

Leer más
LISTADO TIPS