Cursortasten in Formularen mit jQuery

02.
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.

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!

jQuery APEX

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.