JavaScript: resalte el texto en el área de texto y cópielo en el portapapeles

Fragmento de código JavaScript

Cuando busco soluciones para los sitios web de mis clientes, siempre tropiezo con fragmentos de código que generalmente son muy útiles. Para que yo también pueda recordarlos, simplemente reciben una publicación en mi blog.

Copie el contenido de los campos de formulario al portapapeles usando un botón

En el caso actual, el sitio web en cuestión tiene un formulario con un área de texto que consiste en un código TEXTAREA. Este campo de texto contiene muchas líneas de datos que el visitante debe seleccionar y luego copiar al portapapeles. Para facilitar este paso, quería agregar un botón que selecciona todo en el campo de texto de una sola vez y luego lo copia directamente en el portapapeles.

Los pequeños fragmentos de código siempre ayudan a agregar funciones útiles a los sitios web (Foto: Joan Gamell/Unsplash).
Los pequeños fragmentos de código siempre ayudan a agregar funciones útiles a los sitios web (Foto: Joan Gamell/Unsplash).

Fragmento de código Javascript

Todo se resuelve a través de un Javascript, que asume la función del botón. Para hacer esto, use el comando select() para seleccionar el texto en el elemento textarea y luego execCommand('copy' para copiar el texto. Esto funciona bastante bien en los navegadores más nuevos.

Si ya está usando la biblioteca jQuery, puede usar este código:

$("button").click(function(){
    $("textarea").select();
    document.execCommand('copy');
});

Si no tiene jQuery ejecutándose en el sitio web, puede usar este código aquí:

document.querySelector("button").onclick = function(){
  document.querySelector("textarea").select();
  document.execCommand('copy');
};

El código HTML para el botón y el campo de formulario debe diseñarse así:

<button>Auswählen und kopieren</button>
<br/>
<textarea></textarea>

Espero que esto funcione para usted tan bien como lo hizo para mí. Los navegadores más antiguos a veces pueden causar problemas, pero creo que la mayoría de ellos tienen versiones actuales al principio. Si tiene algún fragmento de código útil, hágamelo saber. Siempre estoy contento con los fragmentos de código nuevos y útiles para HTML, JavaScript o PHP.


¿Te gustó el artículo y te ayudaron las instrucciones del blog? Entonces sería feliz si usted el blog a través de una membresía constante o en en Patreon apoyaría.

Escribe un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados con * markiert

En el Blog de Sir Apfelot encontrarás consejos, instrucciones y reseñas sobre productos de Apple como el iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini y Mac Studio.