2013-04-21 6 views
8

Ich habe ein Eingabe-Textfeld, auf dem ich Schlüsselereignis auslösen. Bei der Eingabe verarbeite ich einen bestimmten Code mit dem Eingabewert. Alles funktioniert super.DataList und Enter Key Event

HAML:

%input#myField{:type => "text"} 

JavaScript:

my_field = document.getElementById('myField'); 

my_field.addEventListener("keypress", function (event) { 
    if (event.keyCode == 13) { 
     event.preventDefault(); 

     if (tag_field.value.length != 0) { 
      console.log(my_field.value); 
      // Run my specific process with my_field.value 
      my_field.value = ''; 
     } 
    } 
}, false); 

Aber jetzt will ich Datalist an diesem Eingang hinzuzufügen.

HAML:

%input#myField{:list => "htmlList", :type => "text"} 
%datalist#htmlList 
    %option{:value => "toto"} toto 
    %option{:value => "foo"} foo 

Das Problem ist, wenn ich auf Datenliste navigieren ein Element auszuwählen, ich drücke die Enter-Taste. Auf der Eingabetaste wird mein Listener aufgerufen und verarbeitet meinen Code mit dem Anfangswert der Eingabe.
In diesem Schritt ist der Wert des Feldes leer. Danach wird der Wert durch den in der Datenliste ausgewählten Wert ersetzt.

Also meine Fragen sind:

  • Gibt es eine Möglichkeit, das Verhalten der Datenliste zu ändern, den Eingangswert durch die Datenliste gewählten Wert zu ersetzen, ohne Enter-Taste gedrückt wird? (Disable enter key für datalist)

  • Gibt es eine Möglichkeit festzustellen, wenn der Datenlogger aktiv (oder sichtbar) ist, um ein anderes Verhalten in meinem EventListener zu verarbeiten?

+0

reden wir über etwas so? http://davidwalsh.name/demo/datalist.php – Luke

+0

Ja. Zum Beispiel: nachdem ich "mo" eingegeben habe, wähle ich ein Element in der Liste aus und validiere die Eingabe. Bei diesen Schritten trigge ich den Hörer ab, aber der Eingabewert ist immer noch "mo". – Naremy

Antwort

3

Keypress Veranstaltung wird nach dem Drücken der Taste gefeuert werden, aber bevor die Daten in das Feld eingetragen. Keyup Veranstaltung wird nach dem Drücken der Taste gefeuert, aber nachdem die Daten in das Feld eingetragen

HTML:

<input list="browsers" id="myField"/> 
<datalist id="browsers"> 
    <option value="Chrome"> 
    <option value="Firefox"> 
    <option value="Internet Explorer"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist> 

JS:

var my_field = document.getElementById('myField'); 

     my_field.addEventListener("keyup", function (event) { 
      if (event.keyCode == 13) { 
       event.preventDefault(); 

       if (my_field.value.length != 0) { 
        console.log(my_field.value); 
        // Run my specific process with my_field.value 
        my_field.value = ''; 
       } 
      } 
     }, false); 

http://jsfiddle.net/5p6FZ/