Kako automatski istaknuti tekst nakon korisničkog klika

Neki dijelovi sadržaja na web-stranicama namijenjeni su kopiranju od strane korisnika, kao što su URL adresa, automatski generirani API ključ ili nekoliko redaka koda (isječci). Međutim, kopiranje tih sadržaja može biti izazov, posebno za korisnike koji koriste trackpad ili usran miš. Zato im olakšajmo.

Ako ste naišli na web-mjesta kao što je TheNextWeb, otkrit ćete da je URL kratkog povezivanja označen kada kliknete na njega. Pogledajmo kako se to radi.

Početak rada

Za početak, ispisujemo HTML koji omata URL za kratke veze.

 
 Kratka 
  http://goo.gl/9JEpOz 
 
 

URL je zamotan u pedalj element zajedno s ikonom iz Ionicona. Stil tih elemenata u potpunosti ovisi o vama, jer će ovisiti o izgledu vaše web-lokacije. Ali, u svrhu ovog demoa, stiliziram ga na ovaj način:

Jednostavna je, plava i četvrtasta (ovdje primijenite stilske kodove).

JavaScript

I ovdje je meso koda, JavaScript. Plan je ovdje označite URL kako ga korisnici kliknu.

Kôd počinjemo s varijablom koja odabire element u kojem će korisnik kliknuti.

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

querySelector je JavaScript metoda za odabir elementa; u osnovi radi kao jQuery konstruktor $ (). Možete koristiti notaciju točaka da biste dobili element od klase ili # notacija za dobivanje elementa pomoću ID-a.

Zatim moramo stvoriti novu funkciju JavaScripta.

 odabir funkcije (elem)  

Našu funkciju nazivamo kao izbor(). Kao što možete vidjeti gore, funkcija zahtijeva parametar za prosljeđivanje elementa koji oblaže URL ili bilo koji regularni tekst koji želimo istaknuti. U našem slučaju, to bi bio pedalj element s shortlink__url klasa.

Unutar ove funkcije dodamo još nekoliko varijabli:

 var target = document.querySelector ('. shortlink'); izbor funkcija (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

Prvo, ELEM varijabla odabire element koji prolazimo kroz parametar funkcije. Druga varijabla, Odaberi, pokreće izvornu funkciju JavaScripta kako bi dobio odabir teksta. Posljednja varijabla, opseg kontrolira područje odabira; željeli bismo osigurati da je odabir samo unutar odabranog elementa.

Zatim ćemo povezati ove varijable s nekoliko drugih funkcija JavaScripta kako slijedi:

 var target = document.querySelector ('. shortlink'); izbor funkcija (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (ELEM); select.addRange (raspon);  

Prvi dodatak, range.selectNodeContents (ELEM), definira rasponu odabira što je u ovom slučaju element koji se navodi u ELEM. Posljednji redak, select.addRange (raspon) čini odabir ograničenim navedenim rasponom.

Sjajno! Svi smo spremni za tu funkciju. Stavimo ga u akciju.

Pokreni ga

Vežemo ciljni element s na klik događaj. Kada se element klikne, pokrećemo funkciju koju smo upravo napravili i proslijedimo parametar s nazivom klase elementa gdje je URL omotan; u ovom slučaju jest .shortlink__url.

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

Mi smo gotovi. Kao što je ranije spomenuto, možete to učiniti i za druge vrste sadržaja na web-lokaciji koje biste možda željeli da korisnici lakše kopiraju.

Neki od vas se možda pitaju možemo li automatski kopirati, umjesto samo označite, shorturl nakon što korisnik klikne. Iako se to može činiti kao stvarno dobra ideja, nažalost to nije lako postići i može uzrokovati loše korisničko iskustvo. Akcija kopiranja mora biti u potpunosti pod pristankom korisnika.

Koraci u ovom postu odnose se samo na akciju označavanja. Hoće li ih korisnici kopirati ili ne, ovisi o njima.

Možete pratiti sljedeće veze da biste vidjeli demo ili preuzeti izvorni kod.

• Prikaži demo
• Preuzimanje izvora