title: input type="number" and IE10+
body: <p>I'm trying to do Javascript client-side validation of a number field using an HTML5 <code>&lt;input type="number"&gt;</code> element. There is also server-side validation, so let's not start a rant about that...  ;)</p>
  
  <p>I wish to provide three status levels of validation: Green for a valid number within the defined range, Yellow for an out-of-range number or an empty field, and Red for non-numeric input.</p>
  
  <p>My problem is that IE11 (and, I believe, IE10) seem to return a blank <code>.value</code> property for non-numeric input. That is, if I type <code>abc</code> into the box, <code>.value</code> is <code>""</code>. That prevents me distinguishing Yellow (blank) from Red (garbage).</p>
  
  <p>I'm aware of the existence of the new <code>.valueAsNumber</code> property, but that does not completely help me as I cannot distinguish between empty on other browsers and non-numeric on IE10/11 (<code>.value</code> is empty, <code>.valueAsNumber</code> is <code>NaN</code>).</p>
  
  <p>Has anyone solved this problem? I don't want to resort to tracking keypresses, and I want to support older browsers (back to IE8) that revert to <code>type="text"</code> and do not have <code>.valueAsNumber</code>. Thanks in advance...</p>
  
  <p>Edit: just to clarify (hopefully), my issue is that the output of <code>.value</code> and <code>.valueAsNumber</code> in IE10/11 does not allow me to distinguish between no input and  non-numeric input. I would like to be able to distinguish these two cases without browser-sniffing and falling back to <code>type="text"</code>.</p>