According to the WHATWG, you shouldn't be able to get the value unless it's valid numeric input. The input number field's sanitization algorithm says the browser is supposed to set the value to an empty string if the input isn't a valid floating point number.

The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the empty string instead.

By specifying the type (<input type="number">) you're asking the browser to do some work for you. If, on the other hand, you'd like to be able to capture the non-numeric input and do something with it, you'd have to rely on the old tried and true text input field and parse the content yourself.

The W3 also has the same specs and adds:

User agents must not allow the user to set the value to a non-empty string that is not a valid floating-point number.

It doesn't answer the question, but the useful workaround is to check

edQuantity.validity.valid

The ValidityState of an object gives clues about what the user entered. Consider a type="number" input with a min and max set

<input type="number" min="1" max="10">

We always want to use .validity.valid.

Other properties only give bonus information:

┌──────────────┬────────┬────────╥───────────┬─────────────────┬────────────────┐│ User's Input │ .value │ .valid ║ .badInput │ .rangeUnderflow │ .rangeOverflow │├──────────────┼────────┼────────╫───────────┼─────────────────┼────────────────┤│ ""           │ ""     │ true   ║ false     │ false           │ false          │ valid because field not marked required│ "1"          │ "1"    │ true   ║ false     │ false           │ false          │ │ "10"         │ "10"   │ true   ║ false     │ false           │ false          ││ "0"          │ "0"    │ false  ║ false     │ true            │ false          │ invalid because below min│ "11"         │ "11"   │ false  ║ false     │ false           │ true           │ invalid because above max│ "q"          │ ""     │ false  ║ true      │ false           │ false          │ invalid because not number│ "³"          │ ""     │ false  ║ true      │ false           │ false          │ superscript digit 3│ "٣"          │ ""     │ false  ║ true      │ false           │ false          │ arabic digit 3│ "₃"          │ ""     │ false  ║ true      │ false           │ false          │ subscript digit 3└──────────────┴────────┴────────╨───────────┴─────────────────┴────────────────┘

You'll have to ensure that the the browser supports HTML5 validation before using it:

function ValidateElementAsNumber(element){   //Public Domain: no attribution required.   if ((element.validity) && (!element.validity.valid))   {      //if html5 validation says it's bad: it's bad      return false;   }      //Fallback to browsers that don't yet support html5 input validation   //Or we maybe want to perform additional validations   var value = StrToInt(element.value);   if (value != null)      return true;   else      return false;}

Bonus

Spudly has a useful answer that he deleted:

Just use the CSS :invalid selector for this.

input[type=number]:invalid {    background-color: #FFCCCC;}

This will trigger your element to turn red whenever a non-numericvalid is entered.

Browser support for <input type='number'> is about the same as:invalid, so no problem there.

Read more about :invalidhere.

input.focus();document.execCommand("SelectAll");var displayValue = window.getSelection().toString();