Cursortasten in Formularen mit jQuery

01.
April
2012
Veröffentlicht von: Markus Dötsch

Wie wäre es, wenn man in einem APEX Formular mit den Cursortasten hoch und runter navigieren könnte? So wie wir es in den guten alten Anwendungen aus der Vor-Browser-Zeit gewohnt waren.

Die grundlegende Idee dabei ist, sobald in einer Textbox getippt wird, den Tastendruck mit Javascript-Mitteln 'abzuhöhren' und dann auf die beiden Tasten Cursor-Hoch und Cursor-Runter zu reagieren.

Wie wäre es, wenn man in einem APEX Formular mit den Cursortasten hoch und runter navigieren könnte? So wie wir es in den guten alten Anwendungen aus der Vor-Browser-Zeit gewohnt waren.

Die grundlegende Idee dabei ist, sobald in einer Textbox getippt wird, den Tastendruck mit Javascript-Mitteln 'abzuhöhren' und dann auf die beiden Tasten Cursor-Hoch und Cursor-Runter zu reagieren.

Dann müssten wir errechnen wie das vorherige oder nächste Element benannt ist und den Focus auf dieses Element zu setzen, wenn es denn existiert.


Schritt 1 - Analyse

Um uns einen Überblick zu verschaffen, wie APEX mit seinen Formularen umgeht, verwenden wir zuerst in dem Browser unserer Wahl ein Debug-Tool. Die neueren Ausgaben von Firefox und Chrome bringen schon out of the box ein Tool mit. Für den Internet Explorer und ältere Varianten der anderen Browser müssen für diesen Zweck Addons installiert werden. Zum Beispiel für den IE die Opens external link in new windowDeveloper Toolbar und für Firefox Firebug.

Für fast alle dieser Tools gilt: Mit der rechten Maustaste auf die zu analysierende Stelle auf der Webseite klicken und Element untersuchen auswählen. Je nach Addon erscheinen im unteren Berreich eine Darstellung des HTML-Codes und auf der rechten Seite die Zusammenstellung der CSS-Befehle die an dieser Stelle gelten.

Durch das Aufklicken des HTML Baumes finden wir die verschiedenen Textboxen (input type="text").

<input type="text" class="text_field" maxlength="" size="30" value="BLAKE" name="p_t02" id="P7_ENAME">

Das ID-Attribut des HTML-Tags lässt sich nicht für unsere Zwecke verwenden, da darin der APEX-Itemname steckt (z. B.: P7_ENAME). Das Attribut name lässt sich dafür sehr gut verwenden. Hier zählt APEX alle Elemente des Formulars von Anfang bis Ende durch. Vorne das Prefix "p_t" und danach die laufende Nummer mit führender Null.


Schritt 2 - Selektor

Um auf den Tastendruck reagieren zu können, muss ein Event auf der Seite erzeugt werden. Wir wollen allerdings nur auf den Tastendruck in den Textboxen (<input type="text">) unseres Formulars reagieren. Nicht auf andere evtl. auf der Seite vorhandene Elemente. Deshalb definieren wir einen jQuery Selektor der nur die gewünschten Elemente beschreibt.

Achtung: Die folgenden Details gelten evtl. nur für das hier gewählte "Theme 2". Bei anderen Themes kann eine andere Auswahl notwendig sein. Dann muss der Selektor dafür angepasst werden.

Der jQuery Selektor beschreibt das ausgewählte Element in der Hierarchie der Webseite. In diesem Fall möchten wir alle <input type="text" Elemente, die sich innerhalb des divs mit der Klasse rc-content-main befinden.

Der jQuery Selektor besteht aus der Funktion $ dem als Parameter die hierarchische Angabe der gewünschten Elemente mitgegeben wird. Da es sich bei rc-content-main um eine Klasse (class) handelt, wird der Punkt vorangestellt. Bei dem HTML-Tag input ist kein "Vorzeichen" notwendig.  

Selektor: $('.rc-content-main input') 


Schritt 3 - Funktion

An den Selektor hängen wir den Event keydown an, der aufgerufen wird, sobald eine Taste gedrückt wird, wenn der Fokus auf einem selektierten Element liegt.

$('.rc-content-main input').keydown ...

Sobald der Event auftritt soll eine Funktion ausgeführt werden, die das nächste (Cursor-Runter) oder vorherige (Cursor-Hoch) Element findet und fokussiert.

Wir holen aus dem Namen die Nummer und errechnen das nächste oder vorherige Element und überprüfen ob es ein Item mit diesem Namen überhaupt gibt. Wenn ja, dann wird der Fokus auf dieses Item gesetzt.

Den folgenden kompletten Code können wir auf der Formular-Seite im Bereich JavaScript unter Execute when Page Loads einfügen.

$('.rc-content-main input').keydown(function(ev) {
  var vItemID = $(this).attr('name');
  var vItemNumber = vItemID.substr(3);
  if(ev.which == $.ui.keyCode.DOWN || ev.which == $.ui.keyCode.UP) {
    var vItemNext = Number(vItemNumber)+((ev.which==$.ui.keyCode.UP)?-1:1);
  if(vItemNext<10) {
    var vItemNextName = "p_t0"+vItemNext;
  } else {
    var vItemNextName = "p_t"+vItemNext;
  }
  // Wenn das errechnete Element existiert - dann Focus drauf
  if ($('input[name*='+vItemNextName+']').length > 0) {
    $('input[name*='+vItemNextName+']').focus();
  }
  return false;
  }
});

Probleme bereiten im Formular <input type="hidden"> Felder, da darauf kein Fokus gesetzt werden kann. Diese Elemente müssen an den Anfang oder das Ende des Formulars gesetzt werden, damit sie keinen Einfluss auf die Cursor-Tasten haben.

Weitere Details für den Einsatz von jQuery im APEX-Umfeld erhalten Sie in unseren Opens internal link in current windowAPEX Kursen Grundlagen und Fortgeschritten oder über unsere Opens internal link in current windowConsulting-Abteilung.

Viel Spaß beim Dynamisieren von APEX Anwendungen!

Jede Menge Know-how für Sie!

In unserer Know-How Datenbank finden Sie mehr als 300 ausführliche Beiträge zu den Oracle-Themen wie DBA, SQL, PL/SQL, APEX und vielem mehr.
Hier erhalten Sie Antworten auf Ihre Fragen.