Billentyűparancsok hozzáadása a webhelyéhez

Szeretem a billentyűparancsokat? Segítenek sok időt takarítani, igaz? Szeretne hozzáadni a saját webhelyéhez a billentyűzet gyorsbillentyűit a látogatók javára? Ez jelentősen javítaná webhelye hozzáférhetőségét és navigációját.

Ebben a bejegyzésben egy gyors útmutatót adok arról, hogyan lehet hozzáadni a weboldalt a Mousetrap nevű JavaScript könyvtár segítségével. Egérfogóval kulcsok kijelölése mint a Shift, a Ctrl, az Alt, az Opciók és a Parancs bizonyos funkciókat végezhet el a webhelyén. Ez is jól működik a régebbi böngészőkben.

További információ a Hongkiatról:

• A Hint.Css segítségével könnyedén készíthet animált eszköztippet
• Egy lépésenkénti útmutató létrehozása az Intro.Js segítségével [Tutorial]
• A HTML5 tartomány csúszkájának stílusa
• A cookie & HTML5 helyi tárhely használata

Elkezdeni

Kezdje el egy új HTML-dokumentum létrehozásával a tartalommal együtt, és összekapcsolja az egérfogó könyvtárat. A CDNjs-ben tárolt Mousetrap könyvtárat fogom használni, hogy a könyvtárat a CloudFlare hálózaton keresztül kézbesíthessük, ami gyorsabb, mint a saját szerverünk.

Most fogjuk használni az egérfogót „Kötődnek” a billentyűzet gombjainak funkcióval történő csatolása. Lehet, hogy hozzárendel egy gomb, egy kulcskombináció vagy a szekvencia billentyűk, például

Egyetlen kulcs

Ebben a példában megkötjük az s-t.

 Mousetrap.bind ('s', függvény (e) // a funkció itt…)); 

Kombinációs kulcs

Ebben a példában a Ctrl-t és az s-t kötjük össze. A kijelölt funkció végrehajtásához a két kulcsot együtt kell megnyomnia.

 Mousetrap.bind ('ctrl + s', függvény (e) // a függvény itt…)); 

Szekvencia kulcs

Ebben a példában a felhasználónak meg kell nyomnia a g-ot és aztán s később. Ha web alapú játékot fejleszt, ez hasznos lehet egy titkos rejtett kulcs kombináció hozzáadásához.

 Mousetrap.bind ('g s', függvény (e) // a függvény itt ...)); 

Egérfogó használata

Egy egyszerű weblapot építünk, amely néhány billentyűparancsot tartalmaz, amelyek lehetővé teszik a felhasználók számára, hogy bizonyos funkciókat elérjenek a webhelyen. A jQuery-t használjuk, hogy megkönnyítsük a HTML-dokumentum manipulálását és a HTML-elemek kiválasztását.

Kezdjünk valami egyszerűvel.

Megkötünk egy kulcsot, amely lehetővé teszi a felhasználó számára, hogy gyorsan a keresési beviteli mezőre fókuszáljon.

1. A következő HTML-jelölés a kereséshez a id.

2. Ezután létrehozunk egy olyan funkciót, amely a keresési bemenetre összpontosít.

 függvénykeresés () var search = $ ('# search'); search.val ("); search.focus (); 

3. Végül egy funkciót kötünk a funkció futtatásához.

 Mousetrap.bind ('/', keresés); 

4. Ez az. Mostantól a / gomb megnyomásával navigálhat a keresési bemenetre.

Másik lehetőségként a Ctrl / Cmd + F billentyűkombinációt is kötheted, amely egy népszerű kulcsszó, amelyet sok asztali alkalmazásban használhatsz:

 Mousetrap.bind (['parancs + f', 'ctrl + f'], keresés); 

Egérfogó használata Bootstrap segítségével

Könnyen integrálható az egérfogó egy kerettel, például Bootstrap. Ebben a második példában egy olyan súgóablakot fogunk megjeleníteni, amely megjeleníti a weboldalon elérhető parancsikonok listáját. Itt választom a Bootstrap Modal-t a lista megjelenítéséhez és a? gombot a modális megjelenítéséhez.

Habár a ? csak a Shift billentyűvel érhető el, amely csak a? elegendő.

 Mousetrap.bind ('?', Függvény () $ ('# help'). Modal ('show');); 

Most, amikor megütsz? gomb, megjelenik egy felugró ablak.

Tipp a hatékony kötéshez

Idővel a növekvő gyorsbillentyűgyűjtemény elkezdheti elrontani a kódját. Ha ez megtörténik, van egy kiterjesztés, amelyet hozzáadhat, hogy létrehozza “kulcskötés” kódok hatékonyabbak. Ez az “köti a szótárat”. Adja hozzá ezt a kiterjesztést az elsődleges egérfogó könyvtár után, mousetrap.min.js.

Most, ahelyett, hogy elválasztanánk minden kulcskötést, szépen csoportosíthatjuk őket egyetlenben .bind () módszer, így:

 Mousetrap.bind ('/': keresés, 't': tweet, '?': Funkciómód () $ ('# help'). Modal ('show');, 'j': a következő funkció ( ) highLight ('j'), 'k': függvény prev () highLight ('k')); 

A fejlettebb megvalósítás érdekében láthatod az általam készített demót. A demóban a J vagy a K gomb megnyomásával jelölje ki a bejegyzést, és nyomja meg a T gombot az aktuálisan kijelölt hozzászóláshoz..

• Demó megtekintése
• Letöltés