Fokus mit Eingabe Taste ändern

In diesem Artikel möchte ich euch zeigen wie ihr in einem Webformular den Fokus mit der Eingabe Taste ändern könnt. In einem Formular kann immer nur ein Element den Fokus zur Eingabe haben. Normalerweise wird dieser mit der Tabulatur Taste weiter gegeben. Hin und wieder haben aber Kunden Sonderwünsche. So kann es vorkommen, dass man diese Funktionalität mit der Enter Taste realisieren muss…

Fokus mit Eingabe Taste ändern

Das Problem das sich bei dieser Aufgabe stellt ist folgende: ein Webformular hat beliebig viele Elemente. Diese können zum Beispiel sein:

• input
• select
• textarea
• a
• button
• …

Bei all den HTML Elementen kann ein sogenannter Fokus gesetzt werden. Ein Element mit einem Fokus ist das aktuell ausgewählte Element und kann somit mit der Tastatur bearbeitet werden. Den Fokus setzt man üblicherweise mit der Maus indem man darauf klickt (zum Beispiel auf ein Textfeld) oder bei mobilen Geräten durch einen Klick am Touchscreen auf das Element. In beiden Fällen kann man beim Textfeld über die Tastatur nun einen Text eingeben (beim mobilen Gerät wird eine Tastatur eingeblendet).

Um schnell durch ein Formular zu navigieren gibt es einen so genannten tabindex, der durch eine Zahl für jedes HTML Element eine Reihenfolge definiert. Über diese Nummerierung kann man durch die einzelnen Elemente auch schneller navigieren. Am Desktop PC funktioniert das über die Tabulatur Taste (oder auch kurz Tab) und auf mobilen Geräten durch eine Bestätigung der Eingabe auf der Tastatur (meist steht auf der virtuellen Taste „weiter“).

Problem

Manchmal sind Benutzer gewöhnt die Elemente mit der Eingabe Taste (oder auch Enter Taste) durch zu gehen. Das erscheint für heutige Verhältnisse seltsam, hat aber durchaus seine Berechtigung. In Zeiten von reinen Textformularen auf Konsolen musste man die eingegebenen Werte immer mit der Enter Taste bestätigen. Das hat sich übrigens auch teilweise so bei grafischen Formularen auf Windows Rechnern fortgesetzt, lange bevor es HTML Seiten gab.

Lösung

Die Lösung des Problems ist relativ simpel. Wir können über Javascript das normale Verhalten des Browsers umgehen und mit ein wenig Code die Funktionalität „Fokus mit Enter Taste ändern“ realisieren.

Zuerst brauchen wir eine jQuery Erweiterung. Mit dieser „focusable“ Erweierung können wir uns aus dem aktuellen Dokument alle Elemente holen die einen Fokus erhalten können. Diese sind natürlich sortiert nach dem tabindex. Der Code für diese Erweiterung sieht wie folgt aus:

//jQuery Erweiterung registrieren
jQuery.extend(jQuery.expr[':'], {
    focusable: function (el, index, selector) {
        return $(el).is('a, button, :input, [tabindex]');
    }
});

Wir benötigen auf der Seite ein eingebundenes jQuery. Wie das funktioniert kann man beispielsweise auf der jQuery Seite nachlesen.

Nun zur eigentlichen Funktion. Wir erstellen mittels jQuery eine keypress Funktion für das aktuelle Dokument. Dieses ist in diesem Beispiel für input und select HTML Elemente aktiv, diese Liste kann man bei Bedarf natürlich erweitern.

$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        if(this.type == 'submit')
        {
            form.submit();
        }
        else
        {
            e.preventDefault();
            //alle Elemente die einen Focus bekkommen können der aktuellen Seite
            var $canfocus = $(':focusable');
            var index = $canfocus.index(this) + 1;
            if (index >= $canfocus.length) index = 0;
            $canfocus.eq(index).focus();
            $canfocus.eq(index).select();
        }
    }
});

In der ersten if Abfrage prüfen wir den Keycode. Dieser muss übergeben worden sein, schließlich ist das eine keypress Funktion. Der Keycode 13 ist mit der Enter Taste belegt. Der restliche Code wird also tatsächlich nur ausgeführt, wenn die Eingabe Taste geklickt wurde.

In der nächsten if Abfrage prüfen wir noch, ob das aktuelle Element mit dem Fokus vom Typ submit ist. Sobald wir also den Fokus auf einen button oder ein input Feld mit dem Typ submit setzen bestätigt die Eingabetaste das Formular und es wird abgeschickt. Das erreicht man mit form.submit(). Für alle anderen Elemente gilt nun die gewünschte Funktionalität: „Fokus mit Eingabe Taste ändern.“. Dazu holen wir uns über die focusable Erweiterung alle HTML Elemente die einen Fokus erhalten können. Aus der Liste können wir uns durch den Index des aktuellen Elements das Element mit dem Index +1 holen (also das nächste Element laut tabindex). Sollte der Index größer sein als die Anzahl an Elementen setzen wir diesen noch auf 0 zurück, damit ist garantiert, dass wir die Elemente in einer Endlosschleife durchgehen können. Zuletzt setzen wir dann noch den Fokus. Damit die Eingabe über die Tastatur erleichtert wird falls in dem Textfeld schon Text steht markieren wir diesen.

Fazit

Oft ist man durch Kundenwünsche dazu gezwungen Standardfunktionen an die sich alle Browser halten zu ändern, weil die Benutzer das nun mal schon immer so gewohnt waren. Um diese Abwärtskompatibilität zu gewährleisten können wir uns als Webentwickler auf Javascript verlassen. Damit kann man auch relativ einfach den Fokus mit der Eingabe Taste anstatt des Tabulators ändern. Wenn der Kunde damit glücklich ist, freut uns das natürlich sehr!

Habt ihr auch solche Kunden? Welche „nicht Standard“ Funktionalität habt ihr schon mal umgesetzt?