Kaip automatiškai paryškinti tekstą naudotojo paspaudimu

Kai kurie turinio puslapiai yra skirti naudotojams kopijuoti, pvz., URL adresas, automatiškai sukurtas API raktas arba keli kodo eilutės (fragmentai). Tačiau šio turinio kopijavimas gali būti iššūkis, ypač tiems vartotojams, kurie naudoja „trackpad“ arba „crappy“ pelę. Taigi leiskite jiems lengviau.

Jei suklupote į svetaines, pvz., „TheNextWeb“, pamatysite, kad spustelėjus jį sparčiojo ryšio URL yra paryškintas. Pažiūrėkime, kaip tai daroma.

Darbo pradžia

Visų pirma, mes išdėstome HTML, kuris apgaubia trumpojo ryšio URL.

 
 Trumpas ryšys 
  http://goo.gl/9JEpOz 
 
 

Turime URL įvynioti į a span elementas kartu su piktograma iš Ionicon. Šių elementų stilius priklauso tik nuo jūsų, nes tai priklausys nuo jūsų svetainės išdėstymo. Tačiau šio demo tikslu aš tokiu būdu:

Tai paprasta, mėlyna ir kvadratinė (paimkite stiliaus kodus).

„JavaScript“

Ir čia yra kodo mėsa, „JavaScript“. Planas yra paryškinkite URL, kai naudotojai spustelės jį.

Pradedame kodą su kintamuoju, kuris pasirenka elementą, kuriame naudotojas spustelės.

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

The querySelector yra „JavaScript“ metodas elementui pasirinkti; tai iš esmės veikia kaip jQuery konstruktorius $ (). Jūs galite naudoti taškų žymėjimą, kad gautumėte elementą pagal klasę arba # žymėjimas, kad gautumėte ID pagal ID.

Be to, turime sukurti naują „JavaScript“ funkciją.

 funkcijos pasirinkimas (elem)  

Mes pavadiname savo funkciją kaip pasirinkimas(). Ir kaip matote aukščiau, funkcijai reikia parametro, kuris perduotų elementą, suvyniojantį URL, arba bet kurį įprastą tekstą, kurį norėtume paryškinti. Mūsų atveju tai būtų span elementas su shortlink__url klasė.

Į šią funkciją įtraukiame dar keletą kintamųjų:

 var target = document.querySelector („. shortlink“); funkcijos pasirinkimas (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

Pirma, element kintamasis pasirenka elementą, kurį mes einame per funkcijos parametrą. Antrasis kintamasis, pasirinkite, veikia vietinė „JavaScript“ funkcija, kad gautumėte teksto pasirinkimą. Paskutinis kintamasis, diapazonas valdo pasirinkimo diapazoną; norėtume užtikrinti, kad pasirinkimas būtų tik pasirinkto elemento viduje.

Be to, mes keičiame šiuos kintamuosius su keliomis kitomis „JavaScript“ funkcijomis:

 var target = document.querySelector („. shortlink“); funkcijos pasirinkimas (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (intervalas);  

Pirmasis papildymas, range.selectNodeContents (elem), apibrėžia pasirinkimo diapazonas kuris šiuo atveju yra elementas, apie kurį nurodoma. \ t element. Paskutinė eilutė, select.addRange (intervalas) leidžia pasirinkti tik nurodytą diapazoną.

Puikus! Mes visi turime funkciją. Padarykime ją į veiksmą.

Vykdyti

Mes susiejame tikslinį elementą su paspaudus įvykis. Kai elementas paspaudžiamas, vykdome ką tik padarytą funkciją ir perduodame parametrą su elemento, kuriame URL įvyniotas, klasės pavadinimu; šiuo atveju tai yra .shortlink__url.

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

Mes baigėme. Kaip minėta anksčiau, galite tai padaryti ir kitiems jūsų svetainės turinio tipams, kuriuos galbūt norėsite, kad naudotojai galėtų lengviau kopijuoti.

Kai kurie iš jūsų gali būti įdomūs, jei galėtume automatiškai kopiją, vietoj tiesiog paryškinkite, kad paspaudimas paspaudžiamas vartotojui. Nors tai gali atrodyti tikrai gera idėja, deja, tai nėra lengva pasiekti ir gali sukelti blogą vartotojo patirtį. Kopijavimo veiksmas turėtų būti visiškai vartotojo sutikimas.

Šio įrašo veiksmai užtrunka tik iki ryškiausių veiksmų. Nesvarbu, ar mūsų naudotojai tai nukopijuos, ar ne.

Jūs galite sekti šias nuorodas, kad pamatytumėte demonstraciją arba atsisiųstumėte šaltinio kodą.

• Peržiūrėti demonstraciją
• Atsisiųsti šaltinį