Kā automātiski izgaismot tekstu pēc lietotāja klikšķa

Daži tīmekļa vietņu satura gabali ir paredzēti lietotāju kopēšanai, piemēram, URL adresei, automātiski ģenerētai API atslēgai vai dažām koda rindiņām (fragmentiem). Taču šo saturu var kopēt, jo īpaši lietotājiem, kuri izmanto trackpad vai crappy peli. Tāpēc darīsim viņiem vieglāku.

Ja esat nokļuvis tīmekļa vietnēs, piemēram, TheNextWeb, jūs atradīsiet, ka, noklikšķinot uz tā, tiek iezīmēts saīsnes URL. Pārbaudīsim, kā tas tiek darīts.

Darba sākšana

Vispirms mēs izvietojam HTML, kas aptver īsā saite URL.

 
 Shortlink 
  http://goo.gl/9JEpOz 
 
 

URL ir iesaiņots a span elements kopā ar ikonu no Ionicon. Šo elementu stils ir atkarīgs no jums, jo tas būs atkarīgs no jūsu vietnes izkārtojuma. Taču, lai veiktu šo demonstrāciju, es to veidoju šādi:

Tas ir vienkāršs, zils un kvadrātveida (greifers stila kodus šeit).

JavaScript

Un šeit ir koda gaļa, JavaScript. Plāns šeit ir paredzēts iezīmējiet URL, kā lietotāji to uzklikšķina.

Mēs sākam kodu ar mainīgo, kas izvēlas elementu, kurā lietotājs noklikšķinās.

 var target = document.querySelector (“. shortlink”); 

The querySelector ir JavaScript metode, lai izvēlētos elementu; tas būtībā darbojas kā jQuery konstruktors $ (). Jūs varat izmantot punktu apzīmējumu, lai iegūtu elementu pēc klases vai # apzīmējums, lai iegūtu ID ar ID.

Tālāk mums jāizveido jauna JavaScript funkcija.

 funkciju izvēle (elem)  

Mēs nosaucam savu funkciju kā izvēle (). Un, kā jūs varat redzēt iepriekš, funkcija prasa parametru, lai nodotu elementu, kas ietin URL, vai jebkuru regulāru tekstu, kuru mēs vēlētos izcelt. Mūsu gadījumā tas būtu span elements ar shortlink__url klasē.

Šīs funkcijas ietvaros pievienojam vēl divus mainīgos:

 var target = document.querySelector (“. shortlink”); funkciju izvēle (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

Pirmkārt, element mainīgais izvēlas elementu, kuru mēs izietam caur funkcijas parametru. Otrais mainīgais, izvēlieties, darbojas dzimtā JavaScript funkcija, lai iegūtu tekstu. Pēdējais mainīgais, diapazonā kontrolē atlases diapazonu; mēs vēlamies nodrošināt, ka izvēle ir tikai izvēlētajā elementā.

Tālāk mēs mainām šos mainīgos ar pārējām citām JavaScript funkcijām:

 var target = document.querySelector (“. shortlink”); funkciju izvēle (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (diapazons);  

Pirmais papildinājums, range.selectNodeContents (elem), definē atlases diapazons kas šajā gadījumā ir elements, uz kuru atsaucas. \ t element. Pēdējā rinda, select.addRange (diapazons) veic atlasi tikai norādītajā diapazonā.

Lieliski! Mēs visi esam ar šo funkciju. Let's to īstenot.

Palaist to

Mēs saistām mērķa elementu ar noklikšķiniet uz notikumu. Noklikšķinot uz elementa, mēs izpildām tikko izveidoto funkciju un nododam šo parametru tā elementa klases nosaukumam, kurā URL ir iesaiņots; šajā gadījumā tas ir .shortlink__url.

 target.onclick = funkcija () izvēle ('. shortlink__url'); ; 

Mēs esam pabeiguši. Kā jau iepriekš minēts, jūs varat to darīt arī citiem jūsu vietnes satura veidiem, kurus varētu vēlēties, lai lietotāji varētu vieglāk kopēt.

Daži no jums varētu domāt, vai mēs varētu automātiski kopiju, tā vietā, lai tikai iezīmētu, saīsinājums pēc lietotāja klikšķa. Lai gan tas var šķist patiešām laba ideja, tā diemžēl nav viegli sasniedzama un var izraisīt sliktu lietotāja pieredzi. Kopēšanas darbībai ir jābūt pilnībā lietotāja piekrišanai.

Šajā ziņojumā veiktās darbības to aizņem tikai līdz izceltajai darbībai. Tas, vai mūsu lietotāji to kopēs vai ne, ir tikai to ziņā.

Lai skatītu demonstrāciju vai lejupielādētu pirmkodu, varat sekot šādām saitēm.

• Skatīt demonstrāciju
• Lejupielādēt avotu