So fügen Sie Ihrer Website Tastenkombinationen hinzu

Liebe Tastenkombinationen? Sie können Ihnen helfen, viel Zeit zu sparen, richtig? Möchten Sie Ihrer eigenen Website Tastenkombinationen hinzufügen, die Ihren Besuchern zugute kommen? Dies würde die Zugänglichkeit und Navigation Ihrer Website erheblich verbessern.

In diesem Beitrag werde ich Ihnen eine kurze Anleitung geben, wie Sie Verknüpfungen zu Ihrer Webseite hinzufügen können, indem Sie eine JavaScript-Bibliothek namens Mousetrap verwenden. Mit Mousetrap ist das möglich Schlüssel bestimmen wie Shift, Strg, Alt, Optionen und Befehl zu bestimmte Funktionen auf Ihrer Website ausführen. Es funktioniert auch in älteren Browsern gut.

Mehr zu Hongkiat:

• Animierte Tooltipps einfach mit Hint.Css erstellen
• Erstellen einer schrittweisen Anleitung mit Intro.Js [Tutorial]
• So gestalten Sie den Schieberegler für den HTML5-Bereich
• Verwendung von Cookie & HTML5 Localstorage

Fertig machen

Beginnen Sie, indem Sie ein neues HTML-Dokument zusammen mit dem Inhalt erstellen und die Mousetrap-Bibliothek verlinken. Ich werde die in CDNjs gehostete Mousetrap-Bibliothek verwenden, damit die Bibliothek über das CloudFlare-Netzwerk bereitgestellt wird, das schneller sein sollte als unser eigener Server

Jetzt werden wir die Mausefalle verwenden 'binden' Methode zum Anbringen von Tastaturtasten mit Funktion. Sie können zuweisen eine einzelne Taste, eine Tastenkombination oder Sequenztasten, zum Beispiel

Single Key

In diesem Beispiel binden wir die s.

 Mousetrap.bind ('s', function (e) // Ihre Funktion hier…); 

Kombinationsschlüssel

In diesem Beispiel binden wir die Strg und s. Sie müssen die beiden Tasten zusammen drücken, um die angegebene Funktion auszuführen.

 Mousetrap.bind ('ctrl + s', function (e) // Ihre Funktion hier…); 

Sequenzschlüssel

In diesem Beispiel muss der Benutzer g und dann drücken s anschließend. Wenn Sie ein webbasiertes Spiel entwickeln, kann dies zum Hinzufügen einer geheimen Kombination aus versteckten Schlüsseln nützlich sein.

 Mousetrap.bind ('g s', function (e) // Ihre Funktion hier ...); 

Verwenden der Mausefalle

Wir erstellen eine einfache Webseite mit einigen Tastenkombinationen, über die Benutzer auf einige Funktionen der Website zugreifen können. Wir werden jQuery verwenden, um die Bearbeitung des HTML-Dokuments und die Auswahl von HTML-Elementen zu erleichtern.

Beginnen wir mit etwas Leichtem.

Wir werden eine Taste binden, die es dem Benutzer ermöglicht, sich schnell auf das Eingabefeld für die Suche zu konzentrieren.

1. Das Folgende ist das HTML-Markup für die Suche zusammen mit dem Ich würde.

2. Als Nächstes erstellen wir eine Funktion, die sich auf die Sucheingabe konzentriert.

 Funktionssuche () var search = $ ('# search'); search.val ("); search.focus (); 

3. Zum Schluss binden wir einen Schlüssel, um die Funktion auszuführen.

 Mousetrap.bind ('/', Suche); 

4. Das wars. Sie sollten jetzt in der Lage sein, zur Sucheingabe zu navigieren, indem Sie die Taste / drücken.

Alternativ können Sie auch die Tastenkombination Strg / Cmd + F binden, eine beliebte Tastenkombination für die Suche in vielen Desktop-Apps:

 Mousetrap.bind (['command + f', 'ctrl + f'], Suche); 

Verwenden von Mousetrap mit Bootstrap

Die Mousetrap lässt sich leicht in ein Framework integrieren, z. B. Bootstrap. In diesem zweiten Beispiel wird ein Hilfefenster mit einer Liste der auf der Website verfügbaren Verknüpfungen angezeigt. Hier entscheide ich mich für das Bootstrap Modal, um die Liste zu präsentieren und das? Taste, um den Modal anzuzeigen.

Obwohl die ? ist nur mit der Shift-Taste erreichbar, bindet nur das? Schlüssel ist ausreichend.

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

Nun, wenn du den getroffen hast? Taste erscheint ein Popup.

Tipp für eine effiziente Bindung

Im Laufe der Zeit kann Ihre wachsende Sammlung von Tastenkombinationen Ihren Code durcheinander bringen. In diesem Fall können Sie eine Erweiterung hinzufügen, um Ihre “Schlüsselbindung” Codes effizienter. Es heißt das “Wörterbuch binden”. Fügen Sie diese Erweiterung nach der primären Mousetrap-Bibliothek hinzu, mousetrap.min.js.

Anstatt die einzelnen Tastenkombinationen zu trennen, können wir sie nun in einer einzigen Gruppe zusammenfassen .binden() Methode wie folgt:

 Mousetrap.bind ('/': search, 't': tweet, '?': Function modal () $ ('# help'). Modal ('show');, 'j': Funktion next ( ) highLight ('j'), 'k': function prev () highLight ('k')); 

Für eine fortgeschrittenere Implementierung können Sie die Demo sehen, die ich gemacht habe. In der Demo können Sie die Taste J oder K drücken, um den Beitrag hervorzuheben, und T drücken, um den aktuell ausgewählten Beitrag zu twittern.

• Demo anzeigen
• Herunterladen