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

Algunos elementos de contenido en sitios web están destinados a ser copiados por los usuarios, como una dirección URL, una clave de API generada automáticamente o unas pocas líneas de código (fragmentos). Pero copiar estos contenidos puede ser un desafío, especialmente para los usuarios que usan un trackpad o un ratón de mierda. Así que hagámoslo más fácil..

Si ha tropezado con sitios web como TheNextWeb, encontrará que la URL del enlace corto está resaltada al hacer clic en él. Vamos a ver cómo se hace esto..

Empezando

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

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

Tenemos la URL envuelta en un lapso elemento junto con un icono de Ionicon. El estilo de estos elementos depende totalmente 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 resalta la URL como 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'); 

los querySelector Es un método de JavaScript para seleccionar el elemento; Básicamente funciona como el constructor jQuery. PS. Puede usar la notación de puntos para obtener el elemento por clase o # Notación para obtener un elemento por el ID..

A continuación, necesitamos crear una nueva función de JavaScript.

 selección de funciones (elem)  

Nombramos nuestra función como selección(). 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 resaltar. En nuestro caso, este sería el lapso elemento con el shortlink__url clase.

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 el elem La variable selecciona el elemento que pasamos por el parámetro de la función. La segunda variable, seleccionar, ejecuta una función nativa de JavaScript para obtener la selección de texto. La ultima variable, distancia controla el rango de selección; nos gustaría asegurarnos de que la selección solo esté 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 (range);  

La primera adicion, range.selectNodeContents (elem), define el rango de la selección que en este caso es el elemento referido en el elem. La ultima linea, select.addRange (rango) La selección se limita al rango especificado..

¡Genial! Todos estamos listos con la función. Vamos a ponerlo en acción.

Ejecutarlo

Unimos el elemento objetivo con una al hacer clic evento. A medida que se hace clic en el elemento, ejecutamos la función que acabamos de realizar y pasamos el parámetro con el nombre de clase del elemento donde se envuelve la URL; En este caso lo 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 le gustaría que sus usuarios copien más fácilmente.

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

Los pasos en esta publicación solo lo llevan a la acción de resaltar. Si nuestros usuarios lo copiarían 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