Kuidas automaatse esiletõstmise teksti klõpsata

Mõned veebisaitide sisu on mõeldud kasutajate poolt kopeerimiseks, näiteks URL-aadress, automaatselt genereeritud API-võti või paar rida koodi (fragmente). Kuid nende sisu kopeerimine võib olla väljakutse, eriti kasutajatele, kes kasutavad juhtpulka või räpast hiirt. Seega tehkem neile lihtsam.

Kui olete komistanud veebilehtedele, nagu TheNextWeb, leiate, et selle linki klõpsamisel on lühikese linki URL-i esiletõstetud. Vaatame, kuidas seda tehakse.

Alustamine

Kõigepealt paigutame HTML-i, mis ümbritseb lühilingi URL-i.

 
 Lingiühendus 
  http://goo.gl/9JEpOz 
 
 

Meil on URL pakitud a span koos Ioniconi ikooniga. Nende elementide stiil sõltub täielikult sinust, sest see sõltub teie veebisaidi paigutusest. Kuid selle demo puhul ma stiilsin seda:

See on lihtne, sinine ja ruudukujuline (haara stiilikoodid siia).

JavaScript

Ja siin on koodi kood, JavaScript. Kava on siin esile URL, kui kasutajad seda klõpsavad.

Alustame koodi muutujaga, mis valib elemendi, milles kasutaja klõpsab.

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

The querySelector on elemendi valimiseks JavaScript-meetod; see toimib põhimõtteliselt nagu jQuery konstruktor $ (). Punkti märkega saab elementi klassi või # märge, et saada ID-st element.

Seejärel peame looma uue JavaScript-funktsiooni.

 funktsiooni valik (elem)  

Meie nimi on meie nimi valik (). Ja nagu näete ülalpool, nõuab funktsioon URL-i ümbritseva elemendi või mõne tavalise teksti, mida soovime esile tõsta, parameetri. Meie puhul oleks see nii span elemendiga shortlink__url klassi.

Selle funktsiooni sees lisame veel paar muutujat:

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

Esiteks, elem muutuja valib elemendi, mida me läbi funktsiooni parameetri läbime. Teine muutuja, valige, käivitab natiivse JavaScript-funktsiooni teksti valimiseks. Viimane muutuja, vahemikus kontrollib valiku ulatust; tahaksime tagada, et valik on ainult valitud elemendi sees.

Järgnevalt jagame need muutujad mõne teise JavaScript-funktsiooniga järgmiselt:

 var target = document.querySelector ('. shortlink'); funktsiooni valik (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (vahemik);  

Esimene lisamine, range.selectNodeContents (elem), määratleb valik mis sellisel juhul on element, millele viidatakse elem. Viimane rida, select.addRange (vahemik) muudab valiku piiratud vahemikku.

Suurepärane! Me kõik oleme funktsiooniga määratud. Paneme selle ellu.

Käivita see

Me sidume sihtelementi klõpsa sündmus. Kui elementi klõpsatakse, käivitame me just tehtud funktsiooni ja edastame parameetri selle elemendi klassi nimega, kus URL on pakitud; sel juhul on see .shortlink__url.

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

Me saime valmis. Nagu eespool mainitud, saate seda teha ka muud tüüpi veebisaidi sisu puhul, mida võiksite teie kasutajad hõlpsamini kopeerida.

Mõned teist võivad imestada, kas me saaksime automaatselt koopia, selle asemel, et lihtsalt esile tõsta, on kasutaja klõpsamisel lühike. Kuigi see võib tunduda tõesti hea ideena, ei ole see kahjuks päris lihtne ja võib põhjustada halva kasutaja kogemuse. Kopeerimismeetmed peaksid olema täielikult kasutaja nõusolekul.

Selle postituse sammud viivad selle üles ainult esiletõstmisele. Kas meie kasutajad selle kopeerivad või mitte, on nende otsustada.

Demo vaatamiseks või lähtekoodi allalaadimiseks saate jälgida järgmisi linke.

• Kuva demo
• Allalaadimise allikas