HTML5 input type="number" und onchange

[Ole.]

Guten Morgen,

ich experimentiere grade mit HTML5 und den neuen input-typen. Da sind ja wirklich ein paar nette Sachen dabei, allerdings habe ich Probleme mit den Event-Handlern.

Beispiel:

  
<form name="myform" action="">  
<label for="field1">MyLabel</label><input class="base" type="number" id="field1" min="0" max="30" step="1" value="0">  
</form>  

  
$(function() {  
		  
// onChange-Event  
$(".base").change(function() {  
alert('Hier hat sich was geändert!');  
});  
  
});  

Wenn ich nun, mit den vom Formularfeld bereitgestellten Pfeilen den Wert des Formulars ändere, reagiert das via jQuery gesetzte Event (change() oder click()) nicht.

Wie kann ich die Änderungen im Feld richtig abfragen?

Danke & Gruß
Ole

PS: Ich nutze für meine Tests Chrome 7 (stable), 8 (beta) und 9 (dev). Es reicht mir also vollkommen, wenn eine dieser Versionen das Vorhaben unterstützt.

[Der Martin]

Moin,

<form name="myform" action="">
<label for="field1">MyLabel</label><input class="base" type="number" id="field1" min="0" max="30" step="1" value="0">
</form>

// onChange-Event
$(".base").change(function() {
alert('Hier hat sich was geändert!');
});

Wenn ich nun, mit den vom Formularfeld bereitgestellten Pfeilen den Wert des Formulars ändere, reagiert das via jQuery gesetzte Event (change() oder click()) nicht.

das ist das gleiche Verhalten wie bei einem "herkömmlichen" Eingabefeld - hier feuert onchange auch erst, wenn das Eingabefeld den Focus verliert.

Wie kann ich die Änderungen im Feld richtig abfragen?

Sehr gute Frage ...

So long,
 Martin

[Ole.]

Hallo Martin,

das ist das gleiche Verhalten wie bei einem "herkömmlichen" Eingabefeld - hier feuert onchange auch erst, wenn das Eingabefeld den Focus verliert.

Chrome reagiert auf onchange auch nicht, wenn das input-feld den Fokus verliert. Auch auf onclick reagiert Chrome nur direkt ins input-Feld, nicht jedoch auf die Pfeile.

Opera (10.63) reagiert sowohl bei onchange als auch bei onclick  wie gewünscht.

Gruß
Ole

[Der Martin]

Hallo,

das ist das gleiche Verhalten wie bei einem "herkömmlichen" Eingabefeld - hier feuert onchange auch erst, wenn das Eingabefeld den Focus verliert.
Chrome reagiert auf onchange auch nicht, wenn das input-feld den Fokus verliert. Auch auf onclick reagiert Chrome nur direkt ins input-Feld, nicht jedoch auf die Pfeile.
Opera (10.63) reagiert sowohl bei onchange als auch bei onclick  wie gewünscht.

also anscheinend ein spezielles Problem von Chrome?
Als Notlösung fällt mir da nur ein: Mit setTimeout() eine Überwachungsprozedur einrichten, die in kurzen Abständen, z.B. alle 100ms, den Feldinhalt abfragt und auf Änderungen untersucht, und dann die gewünschte Funktion aufruft.

Ciao,
 Martin

[LX]

Eleganter dürfte onkeyup sein (da bei onkeydown und onkeypress der geänderte Inhalt nicht immer verfügbar ist). Ohne Tastendruck gibt es normalerweise auch keine Änderung. Optional kannst außerdem onblur verfolgen.

Gruß, LX

[Der Martin]

Hallo,

Eleganter dürfte onkeyup sein (da bei onkeydown und onkeypress der geänderte Inhalt nicht immer verfügbar ist). Ohne Tastendruck gibt es normalerweise auch keine Änderung.

möglich, ich habe allerdings *keinen Schimmer*, ob das Anklicken der up/down-Pfeile in einem HTML5-number-Eingabefeld ein onkey*-Ereignis auslöst.

Optional kannst außerdem onblur verfolgen.

Aber das wäre ja wieder das meist nicht gewollte Verhalten, dass die Reaktion erst beim "Verlassen" des Feldes erfolgt.

Ciao,
 Martin

[Struppi]

Aber das wäre ja wieder das meist nicht gewollte Verhalten, dass die Reaktion erst beim "Verlassen" des Feldes erfolgt.

Das ist aber das Verhalten, wie es bei onchange auch ist.

Struppi.

[LX]

Du kannst auch onmouseup zusätzlich noch abfragen.

Gruß, LX

[molily]

Hallo,

neben change ist der passende Event eher input. Damit gehts auch in Chrome. Opera hingegen feuert beim Klicken der Hoch-Runter-Pfeile auch change.
In Safari feuert weder change noch input?! Auch nicht beim Verlassen des Feldes. Hat da jemand eine Idee?

Mathias