Header Ads Widget

Ticker

6/recent/ticker-posts

Copiar TEXTO al portapapeles al hacer clic en el botón

 Copiar al portapapeles es una tarea muy común y la usamos a menudo en computadoras, portátiles y dispositivos móviles.

Este tutorial le explicará cómo copiar texto al portapapeles al hacer clic en un botón usando JavaScript.

Contenido
HTML
JavaScript
CSS

Tabla de contenido ocultar ]

HTML

Cree una marca con un cuadro de entrada que tenga un texto en valor y una función de llamada de botón al hacer clic.

<input type = "text" name = "mytext" id = "mytext" value = "Blog de programación Phpcluster"> 
<button name = "copy" id = "copybtn" onclick = "copyText ()"> Copiar texto </ button > <span id = "msg"> </span>

JavaScript

Primero seleccionamos el campo de texto, luego usamos execCommand () para copiar el texto al portapapeles.

<script>
función copyText ()
{
var mytext = document.getElementById ("mytext");	
	
mytext.select (); // seleccionar campo de texto

document.execCommand ("copiar"); //Copiar texto

document.getElementById ("msg"). innerHTML = "Copiado";
}	
</script>

CSS

El estilo se utiliza para establecer el diseño del campo de entrada y el botón.

<estilo>
#mi texto {
    esquema: ninguno;
    fondo: ninguno;
    ancho: 25%;
    relleno: 10px 10px;
    borde: 1px sólido #eeeee;
    tamaño de fuente: 1em;
    peso de fuente: 100;
    margen inferior: 1em;
}
#copybtn {
    fondo: # 33b7ff;
    borde: 0;
    borde inferior: 3px rgba sólido (73,134,18, .3);
    relleno: 10px 10px;
    color: #fff;
    peso de fuente: 400;
    tamaño de fuente: 20px;
    transición: color de borde 1s;
    decoración de texto: ninguna;
    espacio en blanco: nowrap;
}
</style> 

Publicar un comentario

0 Comentarios