Kā pievienot tastatūras īsceļus uz jūsu vietni

Vai patīk tastatūras īsceļi? Tie var palīdzēt jums ietaupīt daudz laika, vai ne? Vai vēlaties pievienot tastatūras īsceļus savai vietnei, lai tā būtu noderīga jūsu apmeklētājiem? Tas ievērojami uzlabotu jūsu vietnes pieejamību un navigāciju.

Šajā ziņojumā es sniegšu ātru rokasgrāmatu par to, kā pievienot tīmekļa vietnes saīsnes, izmantojot JavaScript bibliotēku, ko sauc par peles slazdu. Ar peles slazdu jūs varat apzīmēt atslēgas piemēram, Shift, Ctrl, Alt, Opcijas un Komanda veikt īpašas funkcijas jūsu vietnē. Tas darbojas arī vecākos pārlūkos.

Vairāk par Hongkiat:

• Ar Hint.Css viegli izveidot animētu rīku padomu
• Pakāpeniskas rokasgrāmatas izveide, izmantojot intro.Js [Tutorial]
• Kā veidot HTML5 diapazona slīdni
• Kā izmantot sīkfailu un HTML5 vietējo atrašanās vietu

Darba sākšana

Sāciet, izveidojot jaunu HTML dokumentu kopā ar saturu un sasaistot Mousetrap bibliotēku. Es izmantošu peles slazdu bibliotēku, kas izvietota CDNjs, lai bibliotēka tiktu apkalpota, izmantojot CloudFlare tīklu, kam vajadzētu būt ātrākam par mūsu pašu serveri

Tagad mēs izmantosim Mousetrap 'saistīt' metode tastatūras taustiņu pievienošanai ar funkciju. Jūs varat piešķirt vienu taustiņu, taustiņu kombināciju vai secības taustiņus, piemēram

Viena atslēga

Šajā piemērā mēs saistām s.

 Mousetrap.bind ('s', funkcija (e) // jūsu funkcija šeit…)); 

Kombinācijas atslēga

Šajā piemērā mēs saistām Ctrl un s. Lai veiktu izraudzīto funkciju, jums būs nepieciešams nospiest divus taustiņus.

 Mousetrap.bind ('ctrl + s', funkcija (e) // jūsu funkcija šeit…)); 

Secības atslēga

Šajā piemērā lietotājam būs jānospiež g un tad s vēlāk. Ja izstrādājat tīmekļa spēli, tas var būt noderīgs slepenas slēptās atslēgas kombinācijas pievienošanai.

 Mousetrap.bind ('g s', funkcija (e) // jūsu funkcija šeit…)); 

Izmantojot peles slazdu

Mēs izveidosim vienkāršu tīmekļa lapu ar pāris tastatūras īsinājumtaustiņiem, kas ļauj lietotājiem piekļūt dažām tīmekļa vietnes funkcijām. Mēs izmantosim jQuery, lai atvieglotu manipulēšanu ar HTML dokumentu un atlasītu HTML elementus.

Sāksim ar kaut ko viegli.

Mēs saistīsim atslēgu, kas ļaus lietotājam ātri koncentrēties uz meklēšanas ievades lauku.

1. Tālāk ir HTML marķējums meklēšanai kopā ar ID.

2. Tālāk mēs izveidojam funkciju, kas koncentrēsies uz meklēšanas ievadi.

 funkciju meklēšana () var search = $ ('# search'); search.val ("); search.focus (); 

3. Visbeidzot, mēs saistām atslēgu, lai palaistu funkciju.

 Mousetrap.bind ('/', meklēšana); 

4. Tas ir tas. Tagad jums vajadzētu būt iespējai virzīties uz meklēšanas ievadi, nospiežot / pogu.

Varat arī saistīt taustiņu kombināciju, Ctrl / Cmd + F, kas ir populārs atslēgas saīsinājums, ko izmanto meklēšanai daudzās darbvirsmas lietotnēs:

 Mousetrap.bind (['komanda + f', 'ctrl + f'), meklēšana); 

Izmantojot peles siksnu ar Bootstrap

Mousetrap ir viegli integrēt ar ietvaru, piemēram, Bootstrap. Šajā otrajā piemērā mēs parādīsim palīdzības logu, kurā tiks parādīts tīmekļa vietnē pieejamo īsceļu saraksts. Šeit es izvēlos Bootstrap modālu, lai parādītu sarakstu un norādītu? taustiņu, lai parādītu modālu.

Lai gan? ir pieejams tikai ar taustiņu Shift, kas ir saistošs tikai? atslēga ir pietiekama.

 Mousetrap.bind ('?', Funkcija () $ ('# help'). Modal ('show');); 

Tagad, kad jūs hit? tiks parādīts uznirstošais logs.

Padoms efektīvai saistīšanai

Laika gaitā jūsu pieaugošais tastatūras īsceļu krājums var sākt izjaukt jūsu kodu. Ja tā notiek, ir iespējams pievienot paplašinājumu, lai padarītu jūsu “atslēgu saistošs” kodi ir efektīvāki. To sauc par “saistīt vārdnīcu”. Pievienojiet šo paplašinājumu pēc primārās peles slazdošanas bibliotēkas, mousetrap.min.js.

Tagad tā vietā, lai atdalītu katru atslēgu, mēs varam kārtīgi tos grupēt vienā .saistīt() metode, piemēram:

 Mousetrap.bind ('/': meklēšana, 't': čivināt, '?': Funkcija modāls () $ ('# help'). Modal ('show');, 'j': funkcija nākamā ( ) highLight ('j'), 'k': funkcija prev () highLight ('k')); 

Lai iegūtu plašāku ieviešanu, jūs varat redzēt demo, ko esmu veicis. Demonstrācijā jūs varat nospiest taustiņu J vai K, lai izceltu ziņu, un nospiediet T, lai izsauktu pašreizējo izcelto ziņu.

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