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.
Shortlinkhttp://goo.gl/9JEpOz
Abbiamo l'URL racchiuso in un elemento span
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:
Il JavaScript
Ed ecco la carne del codice, il JavaScript. Il piano qui è di evidenziare 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');
querySelector
è un metodo JavaScript per selezionare l'elemento; funziona fondamentalmente come il costruttore di jQuery $()
. Puoi usare la notazione a punti per ottenere l'elemento dalla notazione di classe o #
per ottenere un elemento dall'ID.
Successivamente, dobbiamo creare una nuova funzione JavaScript.
selezione della funzione (elem) {}
Denominiamo la nostra funzione come selection()
. 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 l'elemento span
con la classe shortlink__url
.
All'interno di questa funzione, aggiungiamo un paio di altre variabili:
var target = document.querySelector ('. shortlink'); selezione funzione (elem) {var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); }
Innanzitutto, la variabile elem
seleziona l'elemento che passiamo attraverso il parametro della funzione. La seconda variabile, select
, esegue una funzione JavaScript nativa per ottenere la selezione del testo. L'ultima variabile, range
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 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 l' intervallo della selezione che in questo caso è l'elemento indicato nell'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
Associamo l'elemento target a un evento onclick
. Quando si fa clic sull'elemento, eseguiamo la funzione appena creata e passiamo il parametro con il nome della classe dell'elemento su cui è incapsulato l'URL; in questo caso è .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 copiare automaticamente, anziché solo evidenziare, il collegamento al clic dell'utente. Anche se questa può sembrare una buona idea, sfortunatamente 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 di 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
Internet famosi: Then & Now [Infographic]
Internet è in giro da un po 'ora che è un po' strano pensare che potrebbe avere una sorta di storia. Sapevi che il primo libro acquistato su Amazon è successo nel 1995 ? E c'è ancora molto da comprare fino ad oggi. Per quelli di noi curiosi del resto di Internet Firsts, il team di WebpageFX ha messo insieme questa pratica infografica.L
Cosa considerare quando si localizza il sito Web in inglese
Per molte aziende il pensiero dell'espansione è allettante, ma la mossa può essere irta di preoccupazioni sul costo e di allontanarsi dall'ignoto. Troppo spesso accade che le imprese si trovino in una situazione di catch-22; il ROI della localizzazione è sconosciuto, ma rimarrà sconosciuto a meno che tu non faccia un atto di fede .Ma