Ako automaticky zvýrazniť text po kliknutí na používateľa

Niektoré časti obsahu na webových stránkach sú určené na kopírovanie používateľmi, ako je adresa URL, automaticky generovaný kľúč API alebo niekoľko riadkov kódu (úryvky). Kopírovanie týchto obsahov môže byť výzvou, najmä pre používateľov, ktorí používajú trackpad alebo mizernú myš. Takže uľahčime im to.

Ak ste narazili na webové stránky, ako je TheNextWeb, zistíte, že pri kliknutí na neho sa zvýrazní adresa URL krátkych odkazov. Pozrime sa, ako sa to deje.

Začíname

Najprv sme rozložili HTML, ktorý obopína URL odkazu na krátke odkazy.

 
 Shortlink 
  http://goo.gl/9JEpOz 
 
 

Adresa URL je zabalená v priečinku a rozpätie element spolu s ikonou od spoločnosti Ionicon. Štýl týchto prvkov závisí len od vás, pretože bude závisieť od rozloženia vašich webových stránok. Ale pre účely tohto demo som to takto štýl:

Je to jednoduché, modré a štvorcové (uveďte tu štýl kódov).

JavaScript

A tu je mäso kódu, JavaScript. Plán je tu vyzdvihnúť adresu URL, ako ju používatelia kliknú.

Začneme kód s premennou, ktorá vyberie prvok, na ktorom používateľ klikne.

 var cieľ = document.querySelector ("shortlink"); 

querySelector je metóda JavaScript na výber prvku; v podstate funguje ako konštruktor jQuery $ (). Pomocou bodovej notácie môžete získať prvok podľa triedy alebo # zápis pre získanie prvku ID.

Ďalej je potrebné vytvoriť novú funkciu jazyka JavaScript.

 výber funkcií (elem)  

My pomenujeme našu funkciu ako výber (). A ako vidíte vyššie, funkcia vyžaduje parametre na prechod prvku, ktorý obopína adresu URL alebo akýkoľvek bežný text, ktorý by sme chceli zvýrazniť. V našom prípade by to bolo rozpätie prvok s shortlink__url trieda.

V rámci tejto funkcie pridávame ešte pár premenných:

 var cieľ = document.querySelector ("shortlink"); výber funkcií (elem) var elem = document.querySelector (elem); var vybrat = okno.výberSelektúry (); var rozsah = document.createRange ();  

Po prvé elom premenná vyberá prvok, ktorý prejdeme parametrom funkcie. Druhá premenná, vybrať, používa nativnú funkciu JavaScript na získanie výberu textu. Posledná premenná, rozsah riadi výberový rozsah; chceme zabezpečiť, aby výber bol iba v rámci vybraného prvku.

Potom premeníme tieto premenné na niekoľko ďalších funkcií JavaScriptu takto:

 var cieľ = document.querySelector ("shortlink"); výber funkcií (elem) var elem = document.querySelector (elem); var vybrat = okno.výberSelektúry (); var rozsah = document.createRange (); range.selectNodeContents (ELEM); select.addRange (rozsah);  

Prvý prídavok, range.selectNodeContents (ELEM), definuje rozsah výberu čo je v tomto prípade prvok, ktorý je uvedený v elom. Posledný riadok, select.addRange (rozsah) obmedzuje výber na určený rozsah.

Skvelé! Všetci sme s funkciou. Ukážme to v akcii.

Spusti to

Cieľový prvok viazame na po kliknutí event. Po kliknutí na prvok spustíme funkciu, ktorú sme práve vykonali, a prejdeme parametrom s názvom triedy prvku, na ktorom je adresa URL zabalená. v tomto prípade to je .shortlink__url.

 target.onclick = funkcia () výber ('. shortlink__url'); ; 

Sme hotoví. Ako už bolo spomenuté vyššie, môžete tak urobiť aj pre iné typy obsahu na vašich webových stránkach, ktoré by ste chceli, aby vaši používatelia jednoduchšie kopírovali.

Niektorí z vás by sa zaujímali, či by sme mohli automaticky kópie, namiesto toho, aby sa zvýraznil, krátko po kliknutí používateľa. Hoci sa to môže zdať ako naozaj dobrý nápad, bohužiaľ to nie je dosť ľahké a môže spôsobiť zlé užívateľské skúsenosti. Akcia kopírovania by mala byť úplne pod súhlasom používateľa.

Kroky v tomto príspevku sa týkajú len akcie zvýrazňovania. Či by naši používatelia kopírovali alebo nie, je úplne na nich.

Môžete sledovať nasledujúce odkazy, aby ste videli demo alebo stiahli zdrojový kód.

• Zobraziť demo
• Stiahnuť zdroj