Cum să evidențiați textul automat după ce faceți clic pe utilizator

Unele fragmente de conținut de pe site-uri sunt destinate copierii de către utilizatori, cum ar fi adresa URL, cheia API generată automat sau câteva rânduri de cod (fragmente). Însă copierea acestor conținuturi ar putea fi o provocare, în special pentru utilizatorii care folosesc un trackpad sau un șoarece crappy. Asa ca sa le facem mai usor.

Dacă ați dat peste site-uri ca TheNextWeb, veți găsi că URL-ul de scurtături este evidențiat când faceți clic pe el. Să verificăm cum se face acest lucru.

Noțiuni de bază

În primul rând, vom stabili codul HTML care împrăștie URL-ul de scurtături.

 
 Legătură scurtă 
  http://goo.gl/9JEpOz 
 
 

URL-ul este înfășurat într-un deschidere element, împreună cu o icoană de la Ionicon. Stilul acestor elemente depinde în întregime de dvs., deoarece va depinde de aspectul site-ului dvs. Dar, în scopul acestui demo, eu l-am stil astfel:

Este simplu, albastru și pătrat (apucați aici codurile de stil).

JavaScript

Și aici este carnea din cod, JavaScript. Planul este aici evidențiați adresa URL așa cum o fac clic utilizatorii.

Începem codul cu o variabilă care selectează elementul în care utilizatorul va face clic.

 var țintă = document.querySelector ("shortlink"); 

querySelector este o metodă JavaScript pentru a selecta elementul; funcționează practic ca și constructorul jQuery $ (). Puteți utiliza notația punctului pentru a obține elementul de clasă sau # notație pentru a obține un element de identificare.

Apoi, trebuie să creați o nouă funcție JavaScript.

 selectarea funcției (elem)  

Ne numim funcția noastră selecţie(). Și după cum puteți vedea mai sus, funcția necesită un parametru pentru a trece elementul care înfășoară URL-ul sau orice text obișnuit pe care dorim să-l evidențiem. În cazul nostru, acesta ar fi deschidere element cu shortlink__url clasă.

În cadrul acestei funcții, adăugăm și alte câteva variabile:

 var țintă = document.querySelector ("shortlink"); selectarea funcției (elem) var elem = document.querySelector (elem); var select = fereastră.getSelecție (); var domeniu = document.createRange ();  

În primul rând, elem variabila selectează elementul pe care îl parcurgem prin parametrul funcției. A doua variabilă, Selectați, rulează o funcție JavaScript nativă pentru a obține selecția textului. Ultima variabilă, gamă controlează intervalul de selecție; am dori să ne asigurăm că selecția este numai în cadrul elementului selectat.

În continuare, lanșem aceste variabile cu câteva funcții JavaScript, după cum urmează:

 var țintă = document.querySelector ("shortlink"); selectarea funcției (elem) var elem = document.querySelector (elem); var select = fereastră.getSelecție (); var domeniu = document.createRange (); range.selectNodeContents); (elemente select.addRange (interval);  

Prima adăugare, range.selectNodeContents (elem), definește domeniul selecției care în acest caz este elementul menționat în elem. Ultima linie, select.addRange (interval) face ca selecția să fie limitată la intervalul specificat.

Grozav! Suntem cu toții stabiliți cu funcția. Să o punem în acțiune.

Rulați-l

Legăm elementul țintă cu un onclick eveniment. Pe măsură ce se face clic pe element, executați funcția pe care tocmai am făcut-o și treceți parametrul cu numele clasei elementului în care este înfășurat adresa URL; în acest caz este .shortlink__url.

 target.onclick = funcția () selecție ('. scurtlink__url'); ; 

Am terminat. Așa cum am menționat mai devreme, puteți face acest lucru și pentru alte tipuri de conținut de pe site-ul dvs. pe care ați putea dori ca utilizatorii dvs. să le copieze mai ușor.

Unii dintre voi s-ar putea întreba dacă putem în mod automat copie, în loc de a evidenția doar, scurtcircuit după ce faceți clic pe utilizator. Deși acest lucru poate părea o idee foarte bună, din păcate nu este destul de ușor de realizat și poate provoca o experiență nefavorabilă a utilizatorului. Acțiunea de copiere ar trebui să fie pe deplin sub consimțământul utilizatorului.

Pașii din acest post abordează doar acțiunea de evidențiere. Dacă utilizatorii noștri ar copia sau nu, este în întregime la latitudinea lor.

Puteți urmări următoarele link-uri pentru a vedea demo-ul sau pentru a descărca codul sursă.

• Vizualizați demonstrația
• Descărcați sursa