Cómo resaltar automáticamente el texto al hacer clic en el usuario

Algunas partes del contenido de los sitios web deben ser copiadas por los usuarios, como una dirección URL, una clave API generada automáticamente o algunas líneas de código (fragmentos). Pero copiar estos contenidos podría ser un desafío, especialmente para los usuarios que están usando un panel táctil o un mouse malo. Así que hagámoslo más fácil para ellos.

Si ha tropezado con sitios web como TheNextWeb, verá que la URL del enlace corto se resalta cuando hace clic en ella. Veamos cómo se hace esto.

Empezando

Para empezar, establecemos el HTML que envuelve la URL del enlace corto.

 Enlace corto 
 http://goo.gl/9JEpOz 

Tenemos la URL envuelta en un elemento de span junto con un ícono de Ionicon. El estilo de estos elementos depende completamente de usted, ya que dependerá del diseño de su sitio web. Pero, para el propósito de esta demostración, lo estilo de esta manera:

Es simple, azul y cuadrado (agarra los códigos de estilo aquí).

El JavaScript

Y aquí está la carne del código, el JavaScript. El plan aquí es resaltar la URL a medida que los usuarios hacen clic en ella .

Comenzamos el código con una variable que selecciona el elemento en el que el usuario hará clic.

 var target = document.querySelector ('. shortlink'); 

querySelector es un método JavaScript para seleccionar el elemento; básicamente funciona como el constructor jQuery $() . Puede usar la notación de puntos para obtener el elemento por clase o notación # para obtener un elemento por ID.

Luego, necesitamos crear una nueva función de JavaScript.

 selección de función (elem) {} 

Nombramos nuestra función como selection() . Y como puede ver arriba, la función requiere un parámetro para pasar el elemento que envuelve la URL o cualquier texto regular que nos gustaría destacar. En nuestro caso, este sería el elemento span con la clase shortlink__url .

Dentro de esta función, agregamos un par de variables más:

 var target = document.querySelector ('. shortlink'); selección de función (elem) {var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); } 

Primero, la variable elem selecciona el elemento que pasamos a través del parámetro de la función. La segunda variable, select, ejecuta una función nativa de JavaScript para obtener la selección del texto. La última variable, range controla el rango de selección; nos gustaría asegurarnos de que la selección esté solo dentro del elemento seleccionado.

A continuación, encadenamos estas variables con un par de otras funciones de JavaScript de la siguiente manera:

 var target = document.querySelector ('. shortlink'); selección de función (elem) {var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (rango); } 

La primera adición, range.selectNodeContents(elem), define el rango de la selección que en este caso es el elemento al que se hace referencia en el elemento. La última línea, select.addRange(range) hace que la selección se limite al rango especificado.

¡Estupendo! Todos estamos configurados con la función. Pongamos en acción.

Ejecutarlo

Vinculamos el elemento objetivo con un evento onclick . A medida que se hace clic en el elemento, ejecutamos la función que acabamos de crear y pasamos el parámetro con el nombre de clase del elemento donde se envuelve la URL; en este caso es .shortlink__url .

 target.onclick = function () {selection ('. shortlink__url'); }; 

Hemos terminado. Como se mencionó anteriormente, también puede hacerlo para otros tipos de contenido en su sitio web que desee que sus usuarios copien más fácilmente.

Algunos de ustedes se estarían preguntando si podríamos copiar automáticamente, en lugar de simplemente resaltar, el cortocircuito al hacer clic en el usuario. Si bien esto puede parecer una muy buena idea, desafortunadamente no es muy fácil de lograr y puede causar una mala experiencia del usuario. La acción de copia debe ser completamente bajo el consentimiento del usuario.

Los pasos de esta publicación solo lo llevan a la acción de resaltar. Que nuestros usuarios lo copien o no depende totalmente de ellos.

Puede seguir los siguientes enlaces para ver la demostración o descargar el código fuente.

• Ver demostración
• Descargar Fuente