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

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.

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.

Jen Kleinholz( Fundador y Sir Apfelot )

Jens dirige el blog desde 2012. Actúa como Sir Apfelot para sus lectores y los ayuda con problemas de carácter técnico. En su tiempo libre monta monociclos eléctricos, toma fotos (preferiblemente con el iPhone, por supuesto), escala las montañas de Hesse o camina con la familia. Sus artículos tratan sobre productos de Apple, noticias del mundo de los drones o soluciones a bugs actuales.