Is there a way to bypass the impossiblity of jQuery val() to read input type="number" when the first char is not a number IN SOME BROWSERS?

So I came upon the problem, that to for validating a form, I couldn't access an input's val through val() when:

1)the input was of type "number"

2)the input's value was not beginning with a number

simplified html:

<form id="input" class="pro" autocomplete="on">
    <table>
        <tbody>
            <tr>
                <td><input type="number"></td>
            </tr>
        </tbody>
    </table>
</form>

js:

$('input[type="number"]').each(function() {
   $(this).keyup(function() {
      alert($(this).val());
   });
});

and

.attr("value")

has the same behaviour

I have checked that the script is working by changing the type to text, and it worked... but my input needs to be a number and following HTML5 semantic rules this wouldn't be correct.

So, is there a way doing it or am I just missing somet开发者_开发问答hing?

If you do not need to use a numeric input in your markup I would strongly advise using this jQuery plugin. It does exactly what you need and then some!

I have not tested your code, but my gut says that perhaps jQuery isn't up to speed with HTML 5 completely.

Cheers :)

This seems like a case of: "if type='number' doesn't work the way you want, then stop using it". It's easy to convert what is there to a number or see what's there when using a plain text field.

The proposed standard for this says that the .value attribute must always return a valid floating point number no matter what the user tried to type so if the user tries to type a non-numeric character at the beginning, that will not be reflected in the value.

In playing with the number type in Chrome, it's got some bizarre behavior. It appears to latch onto and remember the last valid number it had and if you enter non-valid characters, it still returns the last valid number it had. It sanitizes the field contents when you lose focus. You can play with it here: http://jsfiddle.net/jfriend00/HbUMP/. I've removed jQuery from the situation just so there is no confusion about what it might be doing on top of the plain HTML/JS.

After @Joseph gave me an idea through his fiddle and @Varun Vohra an idea of escaping the input this is a way of doing it:

$('#input input[type="number"]').each(function() {
    $(this).keyup(function(event) {
        if (!this.value) {
            this.value = '';
            // alert
        }
        else if (isNaN(this.value)) {
            this.value = '';
            //alert
        }
        else {
            // go on
        }
    });
});

The first if is used when the browser understands type="number" and if it's a wrong value, deletes it. The second if the browser doesn't understand it so it checks whether is is a number or not. And the last (else) happens if the value is a number (optional though).

That's because an input with a type=number erases it's value immediately upon losing focus when the value inside does not begin with a number.

There are some complex solutions that would allow you to replicate the value of the input field in a hidden input field with type=text as the user types, but first you'll want to make very certain that this is necessary because it ain't pretty :)

Can you not simply test if the input's value is empty? This would mean either the user didn't enter a value, or the value wasn't a number.

Edit It would still be helpful if you clarify why you can't simply test if the input's value is empty, but the following will also work if you don't care about having the little up and down arrows next to the input box (and if you do, then you could add them in manually with some images and bind click events to them):

HTML

<input type="text />

JS

$('input').keypress(function(e){
    if(!(e.which >= 48 && e.which <=58)){ //tests if the key pressed is a number
       return false; //prevents the keypress if not a number
    } 
});

jsFiddle example

I tried many things, and only this one worked:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('[type=number]').attr('type', 'text');
}