Come evidenziare automaticamente il testo al clic dell'utente

Alcuni contenuti di siti Web devono essere copiati dagli utenti, ad esempio un indirizzo URL, una chiave API generata automaticamente o alcune righe di codice (frammenti). Ma copiare questi contenuti potrebbe essere una sfida, in particolare per gli utenti che utilizzano un trackpad o un mouse schifoso. Quindi rendiamolo più facile per loro.

Se ti sei imbattuto in siti come TheNextWeb, scoprirai che l'URL di shortlink è evidenziato quando fai clic su di esso. Diamo un'occhiata a come è fatto.

Iniziare

Per cominciare, disponiamo l'HTML che racchiude l'URL di shortlink.

 
 Shortlink 
  http://goo.gl/9JEpOz 
 
 

Abbiamo l'URL avvolto in a campata elemento insieme a un'icona di Ionicon. Lo stile di questi elementi dipende interamente da te, in quanto dipenderà dal layout del tuo sito web. Ma, per lo scopo di questa demo, lo stile in questo modo:

È semplice, blu e quadrato (prendi i codici di stile qui).

Il JavaScript

Ed ecco la carne del codice, il JavaScript. Il piano qui è quello di evidenzia l'URL mentre gli utenti fanno clic su di esso.

Iniziamo il codice con una variabile che seleziona l'elemento in cui l'utente farà clic.

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

Il querySelector è un metodo JavaScript per selezionare l'elemento; funziona fondamentalmente come il costruttore jQuery $ (). Puoi usare la notazione a punti per ottenere l'elemento dalla classe o # notazione per ottenere un elemento dall'ID.

Successivamente, dobbiamo creare una nuova funzione JavaScript.

 selezione della funzione (elem)  

Denominiamo la nostra funzione come selezione(). E come puoi vedere sopra, la funzione richiede un parametro per passare l'elemento che avvolge l'URL o qualsiasi testo normale che vorremmo evidenziare. Nel nostro caso, questo sarebbe il campata elemento con il shortlink__url classe.

All'interno di questa funzione, aggiungiamo un paio di altre variabili:

 var target = document.querySelector ('. shortlink'); selezione della funzione (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

Prima il elem variabile seleziona l'elemento che passiamo attraverso il parametro della funzione. La seconda variabile, selezionare, esegue una funzione JavaScript nativa per ottenere la selezione del testo. L'ultima variabile, gamma controlla l'intervallo di selezione; vorremmo assicurarci che la selezione sia solo all'interno dell'elemento selezionato.

Successivamente, suddividiamo queste variabili con un paio di altre funzioni JavaScript come segue:

 var target = document.querySelector ('. shortlink'); selezione della funzione (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (range);  

La prima aggiunta, range.selectNodeContents (elem), definisce il gamma della selezione che in questo caso è l'elemento come riferito nel elem. L'ultima riga, select.addRange (range) rende la selezione limitata all'intervallo specificato.

Grande! Siamo tutti impostati con la funzione. Mettiamolo in azione.

Eseguirlo

Leghiamo l'elemento obiettivo con un al clic evento. Quando si fa clic sull'elemento, eseguiamo la funzione appena creata e passiamo il parametro con il nome della classe dell'elemento in cui è avvolto l'URL; in questo caso lo è .shortlink__url.

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

Abbiamo chiuso. Come accennato in precedenza, puoi farlo anche per altri tipi di contenuti sul tuo sito web che potresti desiderare di copiare più facilmente dagli utenti.

Alcuni di voi potrebbero chiedersi se potessimo automaticamente copia, invece di evidenziare, lo shorturl sul clic dell'utente. Anche se questa può sembrare una buona idea, purtroppo non è abbastanza facile da raggiungere e può causare un'esperienza utente negativa. L'azione di copia dovrebbe essere completamente sotto il consenso dell'utente.

I passaggi in questo post prendono solo l'azione di evidenziazione. Se i nostri utenti lo copiano o no, dipende interamente da loro.

Puoi seguire i seguenti link per vedere la demo o scaricare il codice sorgente.

• Visualizza la demo
• Scarica fonte