Kako samodejno poudariti besedilo po kliku uporabnika

Nekatere vsebine na spletnih mestih so namenjene kopiranju s strani uporabnikov, kot so naslov URL, samodejno ustvarjen ključ API ali nekaj vrstic kode (odrezki). Toda kopiranje teh vsebin je lahko izziv, zlasti za uporabnike, ki uporabljajo sledilno ploščico ali trdo miško. Zato jim olajšamo.

Če ste naleteli na spletne strani, kot je TheNextWeb, boste ugotovili, da je URL kratkih povezav poudarjen, ko kliknete nanj. Poglejmo, kako je to narejeno.

Kako začeti

Za začetek postavimo HTML, ki ovija URL kratkih povezav.

 
 Kratka povezava 
  http://goo.gl/9JEpOz 
 
 

URL je ovit v a razpon skupaj z ikono iz Ionicona. Slog teh elementov je v celoti odvisen od vas, saj bo odvisno od postavitve vaše spletne strani. Ampak, za namen te predstavitve, jo oblikujem na ta način:

Je preprosta, modra in kvadratna (tukaj uporabite kode stila).

JavaScript

In tukaj je meso kode, JavaScript. Načrt je tukaj označite URL, ko ga uporabniki kliknejo.

Kodo začnemo s spremenljivko, ki izbere element, v katerem bo uporabnik kliknil.

 var target = document.querySelector (".kraj povezave"); 

The querySelector je metoda JavaScript za izbiro elementa; v bistvu deluje kot konstruktor jQuery $ (). Za zapis elementa lahko uporabite zapis nota # zapis za pridobitev elementa z ID-jem.

Nato moramo ustvariti novo funkcijo JavaScript.

 izbira funkcije (elem)  

Našo funkcijo imenujemo kot izbira (). Kot lahko vidite zgoraj, funkcija zahteva, da parameter prenese element, ki ovija URL ali kateri koli običajni tekst, ki ga želimo poudariti. V našem primeru bi bilo to razpon element z shortlink__url razred.

V tej funkciji dodamo še nekaj spremenljivk:

 var target = document.querySelector (".kraj povezave"); izbira funkcije (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

Prvič, elem spremenljivka izbere element, ki ga bomo prešli skozi parameter funkcije. Druga spremenljivka, izberite, zaganja izvorno funkcijo JavaScript, da pridobi izbor besedila. Zadnja spremenljivka, območju nadzoruje območje izbora; želimo zagotoviti, da je izbira samo znotraj izbranega elementa.

Nato spremenimo te spremenljivke z nekaj drugimi funkcijami JavaScripta, kot sledi:

 var target = document.querySelector (".kraj povezave"); izbira funkcije (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (območje);  

Prvi dodatek, range.selectNodeContents (elem), opredeljuje obseg izbire v tem primeru gre za element, ki je naveden v. \ t elem. Zadnja vrstica, select.addRange (obseg) izbira je omejena na določeno območje.

Super! Vsi smo pripravljeni na funkcijo. Dajmo v akcijo.

Zaženi

Ciljni element povežemo z onclick dogodka. Ko je element kliknjen, zaženemo funkcijo, ki smo jo pravkar izdelali, in posredujemo parameter z imenom razreda elementa, kjer je URL zavit; v tem primeru je .shortlink__url.

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

Končali smo. Kot smo že omenili, lahko to storite tudi za druge vrste vsebin na vaši spletni strani, ki bi jih vaši uporabniki želeli lažje kopirati.

Nekateri se morda sprašujete, če bi lahko samodejno kopirati, namesto samo označite, shorturl po kliku uporabnika. Čeprav se to morda zdi res dobra ideja, je žal žal ni enostavno doseči in lahko povzroči slabo uporabniško izkušnjo. Dejanje kopiranja mora biti v celoti v soglasju uporabnika.

Koraki v tej objavi se nanašajo le na akcijo označevanja. Ali bodo naši uporabniki to kopirali ali ne, je v celoti odvisno od njih.

Sledite lahko naslednjim povezavam, da si ogledate predstavitev ali prenesete izvorno kodo.

• Prikaži predstavitev
• Prenesi vir