Pasar al contenido principal

ūüĒ• Hoy comenzamos la especialidad en programaci√≥n backend con PHP con Yesi Days ¬°La primera clase es en vivo y gratis! ūüėć Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
José Luján
Luis Avilés
√Ālvaro Felipe
√Ālvaro Felipe
√Ālvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
√Ālvaro Felipe
Alexys Lozada, √Ālvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
√Ālvaro Felipe
José Luján
√Ālvaro Felipe
√Ālvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
√Ālvaro Felipe
José Luján
Jonathan MirCha
√Ālvaro Felipe
√Ālvaro Felipe
Beto Quiroga, Alexys Lozada
√Ālvaro Felipe
Juan Villalvazo
Luis Avilés
√Ālvaro Felipe
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Tip: Copiar al portapapeles el texto seleccionado con JavaScript

Con JavaScript podemos copiar al portapapeles del sistema cualquier texto seleccionado.

Tip: Copiar al portapapeles el texto seleccionado con JavaScript

Capturar el texto que un usuario selecciona tiene muchas utilidades, por ejemplo, mostrar un callout para compartir esa selecci√≥n en Google (como hace Medium). Tambi√©n puedes usarlo para a√Īadir un comentario espec√≠fico sobre esa selecci√≥n. O para responder un comentario citando una parte espec√≠fica de este. As√≠ que manos a la obra, porque es m√°s f√°cil de lo que parece.

En primer lugar, necesitamos un evento que nos diga cuando el usuario ha seleccionado texto. Lamentablemente tal evento no existe, y drangend tampoco nos servirá porque solo se aplica a elementos que puede ser arrastrados. Así que recurriremos al veterano mouseup que nos detectará cuando el usuario suelte el botón el mouse.

document.addEventListener('mouseup', () => {
  // nuestro código para capturar la selección
})

Pues bien, tenemos la mitad solucionada. Para la otra mitad usaremos la API Selection, que como su nombre lo dice nos permite acceder al objeto Selection de window con todas sus propiedades y métodos. Usaremos el método toString() que nos devuelve el texto selecionado.

document.addEventListener('mouseup', () => {
  let selected = window.getSelection().toString(); 
  console.log(selected)
});

Copiar el texto seleccionado

Una aplicación práctica sería copiar el texto seleccionado en el portapapeles (y nos ahorramos un CTRL C). Para eso usaremos el método document.execCommand() el cual devolverá false si el navegador no lo soporta. Así que manos a la obra.

document.addEventListener('mouseup', () => {
  let selected = window.getSelection().toString(); 
  let copySelected = document.execCommand('copy');
  copySelected ? copySelected : console.log('sorry, your browser doesn\'t support execCommand')
});

¬°Funciona! Pru√©balo t√ļ mismo (copia el c√≥digo anterior, pegarlo en la consola del navegador, selecciona texto de esta p√°gina y compru√©balo).

El método document.execCommand() ejecuta diversas acciones sobre el texto seleccionado, como copiarlo, ponerlo en negrita, centrarlo, etc. (casi casi como un editor de texto clásico).

Más información:

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal