Putting text in a number input doesn't trigger change event?

Question

example

It appears that entering text into <input type="number"/> does not trigger a change event. I would like a change event so that I can warn the user to fix their input. How can I get a change event for this, and get the current value so that I can verify the bad input?

I've been testing in Chrome.

$('input').on('change', function() {
    alert('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
put letters in me and press tab: <input type="number"/>

Answer 1

Try using the other keyboard events then. For example, I just added

$("input").on('keyup', function() {
    alert('keyup' + $(this).val());
})

To your JSFiddle example, and the alert appears after pressing a within the number textbox.

Note: Checking $(this).val() will not return you invalid characters (at least in Chrome). It strips invalid values before returning the result (e.g., 1a becomes blank). This is also why the change event appears to not be fired when its value hasn't actually changed because the input is all invalid. To catch invalid characters, you must instead check the event's keyCode:

$("input").on('keyup', function(e) {
    if (e.keyCode < 48 || e.keyCode > 57) {
        // not 0-9 (note: ignores -)
        alert('error!');
    }
});

After messing around a bit more, I noticed that Chrome and IE10 behave similarly, but IE10 seems to have a bug in its stripping:

If you start the number input with a non-number, then IE10 (possibly 9 as well) will consider the rest of the input to be a valid number regardless of what characters follow (e.g., 1a2 is just as valid as 12 in the eyes of IE). However, in Chrome, if you enter a non-number, then it will immediately ignore the input and declare it to be invalid; in IE10, if you start with a non-number, then the behavior is the same.

One big difference in behavior is that IE10 will clear an invalid number field after blur, but, again, they only consider it invalid if the field starts with a non-number (e.g., a1). - can precede numbers, but not more than one of them.

In both browsers, if the number is considered invalid, then this.value (and consequently $(this).val()) will return blank. In IE10, you can be get the raw, invalid value if the number starts with a number (0-9). Both browsers will only fire change events when they consider the input to have actually changed and--in IE10's case--that means if the user enters abcd and then blurs the input, then IE10 will clear the field and fire a change event if it had a valid value before being changed. In Chrome, the change occurs whether the input is valid or not; if it's invalid then it is changed to a blank value.

What this means is that you can handle valid and invalid number input, but you cannot dependably get the actual value that the user has typed into the textbox.

HTML

put letters in me and press tab:
<br />
<input type="number"/>
<br />
<p id="event" />
<p id="text" />

JavaScript

function checkValid(e) {
    var $this = $(this);
    $("#event").text(e.type);
    $("#text").html("this.value: " +
                    this.value +
                    "<br />$(this).val(): " +
                    $this.val() + "<br />$(this).is(:valid): " +
                    $this.is(":valid") +
                    "<br />$.isNumeric(this.value): " +
                    $.isNumeric(this.value)); // <- helps check
}

$('input[type="number"]').on('change', checkValid).on("keyup", checkValid);

You can check to see if it is a valid number by checking $.isNumeric. The :valid and :invalid pseudo classes do not work in IE10 with number except when the field is marked as required (not at all in IE9), but they both work in Chrome without marking it as required.

Answer 2

As pickypg has noted, if a user types 'abcd' into an <input type='number'> element, you cannot get the value 'abcd' via $(this).val(). (Caveat: I've only tested in Chrome.)

However, you can determine whether the HTML5 input validity constraints are satisfied (valid) or not by calling myDOMelement.checkValidity(), or looking at the individual properties of the myDOMelement.validity object. This at least lets you distinguish between a blank field (valid) and one containing 'abcd' (not valid). Check here for more on HTML5 validity.

What is rather confusing, at least in Chrome, is that if an <input type='number'> element is initially blank and then you type in 'abcd', the 'change' event is not fired on blur. Likewise when you delete 'abcd' from the field so the field becomes blank.

A workaround is testing for changes in the HTML5 validity on blur. Here's a jsFiddle to illustrate the technique. Note that you still cannot tell if the user has changed 'abcd' to 'efgh', since those are both not valid.