CODEWITHSUNDEEP
javascriptformshtmlgoogle-chrome
kander
kander

Reputation: 4286

Event to detect change of an HTML5 number control in Webkit/Chrome?

HTML5 gives us some new input elements to play with, such as <input type=number>. This renders (in Chrome) as a textbox with two cycle buttons inside the textbox, for incrementing and decrementing the numeric value inside the box.

For a personal hobby project, I'm using this control. However, I'm stuck with one issue:

Is there a way to detect the value being changed using a javascript event? I had expected the onChange event to fire, but no such luck. Also, onClick only triggers when the textbox content is clicked, not when the cycle buttons are clicked.

Any ideas? (apart from: hey, it's HTML5 Forms, don't expect anything to work yet!)

Edit: As mikerobi points out below, the onChange event does fire as soon as the element loses focus. Still not quite what I'm looking for, so other comments and suggestions are welcome!

Upvotes: 5

Views: 4840

Answers (3)

hookedonwinter
hookedonwinter

Reputation: 12666

$.click() works fine. If you click and hold, it doesn't until you release.

Upvotes: 2

kander
kander

Reputation: 4286

Result of the bugreport: Won't Fix, because the input event is fired when those buttons are pressed. It's part of the HTML5 spec. So problem solved, thanks to mikerobi's sugestion to file the report.

Upvotes: 6

mikerobi
mikerobi

Reputation: 20878

The onChange event gets fired when when the box loses focus, but you probably already know that.

The HTML5 specifies that a number input should be a text box or spinner control, but the spec does not appear to have any guidelines for how a spinner should look or behave, leaving those decisions up to the browser vendors.

It appears that in the Mac Safari, the spin buttons do respond to click events, you might want to file a Chrome bug report, I suspect it was just an oversight.

Upvotes: 2

Related Questions