Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Botón Copiar al portapapeles

HTML - Botón Copiar al portapapeles

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Jhonaz

Botón Copiar al portapapeles

Publicado por Jhonaz (1 intervención) el 24/02/2022 01:40:54
Buenas noches a toda la comunidad, tengo un formulario en html al cual necesito agregarle un botón que me copie al portapales todos los input type (date), (time) y (text), junto con sus titulos o nombres. para de esta manera poder pegar la información en un archivo plano u otro documento, ya que a través de javascript, solo logro copiar un textarea, pero como dicen que "una imagen vale más que mil palabras" adjunto una imagen de lo que intento hacer muchas gracias por su ayuda.



Screenshot
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Botón Copiar al portapapeles

Publicado por Antonio (19 intervenciones) el 09/03/2022 12:08:56
Hola buenas es con javascript mas sencillo que con html ejemplo solo del textarea:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea" cols="50"></textarea>
<button onclick="copyToClipBoard()">Copy</button>

<script src="link to your JS file"></script>
</body>
<script>
function copyToClipBoard() {

var content = document.getElementById('textArea');

content.select();
document.execCommand('copy');


}
</script>
</html>

También se podría hacer de otras formas por ejemplo con coger el id o la clase: https://www.delftstack.com/es/howto/javascript/javascript-get-input-value/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ivan

Botón Copiar al portapapeles

Publicado por Ivan (57 intervenciones) el 31/03/2022 21:26:41
Hola,

una forma de hacerlo sería la siguiente (escribo muy escueto pero funciona como ejemplo):

<!DOCTYPE html>
<html>
<body>

<h1>EJEMPLO PARA COPIAR FORMULARIO</h1>
<script>
function copyForm() {
let texto = "CREACIÓN DE EVENTOS\n";
texto += "Fecha: " + f1.fecha.value;
texto += "Hora: " + f1.hora.value+"\n";
texto += "Descripción: " + f1.descripcion.value;
var copyText = document.getElementById("myCopy");
copyText.style.display = 'block';
copyText.value = texto;
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
copyText.style.display = 'none';
alert('COPIADO:\n\n'+texto+'\n\n CTRL+V pegar');
}
</script>

<form name="f1">
<input type="date" name="fecha">
<input type="time" name="hora">
<textarea name="descripcion"></textarea>
<textarea id="myCopy" style="display:none"></textarea>
<button onclick="copyForm()">Copiar</button>
</form>

</body>
</html>

Espero que como idea te sirva, un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar