jQuery - Cannot retrieve Input Number value

Question

<input id='nb' name="nb" type="number" placeholder="Number"/>

jQuery.val() returns the value if there are only numbers, but empty if there is any letter.

Chrome shows the input number arrows (and they work), but I can type letters too.. Weird thing

BTW on mozilla and IE8 it becomes a normal input text (guess I have an old mozilla)

Any idea ? Couldn't find anything on jQuery doc specific to number inputs with .val()

Out of curiosity, what does `this.value` give (in place of `$(this).val()`)? — David Thomas, May 22 '13 at 10:39
The most easy way to do this, in approach, is to ignore HTML5, use an ` — DaGLiMiOuX, May 22 '13 at 10:39
Change type to text, you will get number as well as letters whatever you type — Sudz, May 22 '13 at 10:40
It's similar, but not duplicate. Here, OP is using HTML5. Duplicated will be if he worked as I suggested in a previous comment and his real problem is getting the value from the input. — DaGLiMiOuX, May 22 '13 at 10:42
If Chrome allows to input random letters as well, that’s a bug in my opinion – http://www.w3.org/TR/html5/forms.html#number-state-(type=number) says, _“User agents must not allow the user to set the value to a non-empty string that is not a valid floating-point number.”_ — CBroe, May 22 '13 at 11:35
@DavidThomas -> undefined, always, even on text inputs. I believe that you can't use standard .value on jquery selectors — user2316341, May 22 '13 at 12:41
@CBroe -> In that case, is there anything wrong about my input ? There is not much I could have done wrong here — user2316341, May 22 '13 at 12:42
_“I believe that you can't use standard .value on jquery selectors”_ – you can’t access normal DOM element properties on jQuery objects, because they aren’t DOM elements; you’d have to “de-reference” the jQuery object first to get to the real DOM element: `$("#nb")[0].value` — CBroe, May 22 '13 at 12:48

DaGLiMiOuX · Answer 1 · 2013-05-22T13:24:51.083

Suggestion for input type="text" instead HTML5 input input type="number":

//HTML

<input id="inp" type="text" />

//JAVASCRIPT (JQUERY NEEDED)

function onlyNumbers(evt) {
    // SOME OPTIONS LIKE ENTER, BACKSPACE, HOME, END, ARROWS, ETC.
    var arrayExceptions = [8, 13, 16, 17, 18, 20, 27, 35, 36, 37,
        38, 39, 40, 45, 46, 144];
    if ((evt.keyCode < 48 || evt.keyCode > 57) &&
            (evt.keyCode < 96 || evt.keyCode > 106) && // NUMPAD
            $.inArray(evt.keyCode, arrayExceptions) === -1) {
        return false;
    }
}

$('#inp').on('keydown', onlyNumbers);

//JAVASCRIPT (WITHOUT JQUERY)

function inArray(value, arr) {
    for(var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
            return i;
        }
    }
    return -1;
}

function onlyNumbers(evt) {
    // SOME OPTIONS LIKE ENTER, BACKSPACE, HOME, END, ARROWS, ETC.
    var arrayExceptions = [8, 13, 16, 17, 18, 20, 27, 35, 36, 37,
        38, 39, 40, 45, 46, 144];
    if ((evt.keyCode < 48 || evt.keyCode > 57) &&
            (evt.keyCode < 96 || evt.keyCode > 106) && // NUMPAD
              inArray(evt.keyCode, arrayExceptions) === -1) {
        return false;
    }
}

document.getElementById('inp').onkeydown = onlyNumbers;

As I said in my comment, until HTML5 becomes an standard web language that we can work with it properly, I prefer to use this.

Demo with jQuery
Demo without jQuery

score 0 · Answer 2 · answered May 22 '13 at 11:30

0

If you want to get only numbers from input then you need to use regular expressions. Initially get the value from input using $(your_element).val() then use regular expressions.

Here is a running example. Hope it helps.

answered May 22 '13 at 11:30

Arslan Rafique

176
1
12

This is not my problem, I am already using this kind of solution to enable cross browser support. I hoped that on HTML5 capable browsers, this wouldn't be needed, but apparently even chrome doesn't always support "number" inputs. Just for info, what I use http://jsfiddle.net/gJQCf/ – user2316341 May 22 '13 at 12:37

jQuery - Cannot retrieve Input Number value

2 Answers2