Values eines Selectfeldes ansteuern

[medi]

Hallo,

habe folgendes Problem.
Wenn ich ein Selectfeld habe, möchte ich mit der Tastatur die entsprechende Option eintippen und auf selected=true setzen können.

Bsp:
Ein select mit den options 1 bis 31. Tippe ich 22 (also zwei mal die 2 drücken) ein, soll die option mit dem value 22 selektiert sein. Ohne Javascript wird nach Eingabe von 22 die option mit dem value 21 selektiert.

Ich nutze das prototype Framework.

Hier mal mein bisheriger Code:

Event.observe(window, 'load', initSelects);  
  
var keyLogger = '';  
var selectID = '';  
  
// alle selects beim Focus observen  
function initSelects() {  
  var ID;  
  var counter = 0;  
  var selects = $$('select');  
  selects.each(function(Elem) {  
    counter++;  
		  
    if(!Elem.id) {  
      Elem.id = ID = 'id_select_' + counter;  
    } else {  
      ID = Elem.id;  
    }  
		  
    $(ID).onfocus = function() {if(selectID != this.id) {keyLogger = '';} selectID = this.id; document.observe('keydown', startLogger);};  
    $(ID).onblur = function() {document.stopObserving('keydown', startLogger);};  
  });  
}  
  
function startLogger(event) {  
  var key = event.keyCode;  
  // nur Zahlen/Buchstaben  
  if((48 <= key && key <= 57) || (65 <= key && key <= 90)) {  
    var keyChar = String.fromCharCode(key);  
    keyLogger = keyLogger.concat(keyChar);  
    // options ablaufen  
    for(i = 0; i < $(selectID).length; i++) {  
      // option.value startet mit bisheriger Eingabe -> selected setzen und Schleife beenden  
      if($(selectID).options[i].value.toString().startsWith(keyLogger)) {  
        $(selectID).options[i].selected = true;  
        break;  
      } else {  
        $(selectID).options[0].selected = true;  
      }  
    }  
  }  
}

Allerdings haut das nicht ganz hin. Wenn ich jetzt 22 eintippe, wird die option mit dem value 23 selektiert. Das finde ich etwas verwirrend. Setze ich vor die Zeile $(selectID).options[i].selected = true; ein alert('bla');, wird nach Eingabe von 22 auch die option mit dem value 22 selektiert. Also so wie ich es mir gedacht habe. Nur verstehe ich grade nicht wo mein Fehler liegt.

Geht es denn überhaupt so, wie ich es mir gedacht habe, oder bin ich auf dem kompletten Holzweg?

Hoffe mir kann wer helfen.

THX & greetz
medi

[Cheatah]

Hi,

Ein select mit den options 1 bis 31. Tippe ich 22 (also zwei mal die 2 drücken) ein, soll die option mit dem value 22 selektiert sein. Ohne Javascript wird nach Eingabe von 22 die option mit dem value 21 selektiert.

nicht bei mir. Wenn Du das also so möchtest, dann benutze einen anderen Browser - anstatt den Nutzern Deiner Seite ein Verhalten aufzuzwängen, das sie nicht erwarten.

Ich nutze das prototype Framework.

Ich benutze das Vernunft-Framework. Das ist in Sachen Usability um einiges leistungsfähiger.

Cheatah

[medi]

nicht bei mir. Wenn Du das also so möchtest, dann benutze einen anderen Browser - anstatt den Nutzern Deiner Seite ein Verhalten aufzuzwängen, das sie nicht erwarten.

Ich nutze den FF 3.6 - und wenn 95% der Seitenbesucher diesen Browser nutzen, werde ich diese sicherlich nicht zwingen auf den IE umzusteigen ;)

Ich benutze das Vernunft-Framework. Das ist in Sachen Usability um einiges leistungsfähiger.

Nicht hilfreich...
Das prototype Framework ist so oder so in das Projekt eingebunden, also kann ich auch einige Elemente davon nutzen.

Hat jemand einen Lösungsvorschlag für mich?

[LX]

Hallo, medi!

Was Cheatah Dir mitteilen wollte (und was Du offenbar nicht verstanden hast): dass er Dein Ansinnen für blödsinnig hält, nicht, dass es nicht lösbar wäre. Ein Lösungsansatz sähe ungefähr so aus (jetzt mal ohne Prototype, da ich nicht gerne Prototypen überlade):

selectfield.onkeyup = function(ev) {
   var e=ev||window.event;
   var key=e.which||e.keyCode||e.charCode;
   if (key === 50 && this.lastkey === 50) {
      /* set selected option here */
   }
   this.lastkey = key;
}

Wie Du damit umgehst, bleibt natürlich Dir überlassen. Allerdings macht es wenig Sinn, Zeit auf die Entwicklung eines derartigen Verhaltens zu verschwenden, ohne dem Nutzer die Möglichkeit zu geben, es zu verstehen. Sofern Du der einzige Nuzter bleiben willst, ist das kein Problem - wenn andere auf die Seite kommen, kannst Du ihnen mit einem Hilfetext helfen. Dass Deine Seite dann weniger Nutzerfreundlich (besonders für sehbehinderte Nuzter) ist, musst Du dann wohl in Kauf nehmen.

Gruß, LX