HTML5 Number Input

http://stackoverflow.com/questions/8354975/how-to-add-maxlength-for-html5-input-type-number-element

by Stéphane Cabaret

HTML

<input name="myInput_DRS"
    onkeypress="return isNumeric(event)"
    oninput="maxLengthCheck(this)"
    type = "number"
    placeholder="Type..."
    min = "1"
    max = "999" />

<script>
  function maxLengthCheck(object) {
    if (object.value.length > object.max.length)
      object.value = object.value.slice(0, object.max.length)
  }
    
  function isNumeric (evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode (key);
    var regex = /[0-9]|\./;
    if ( !regex.test(key) ) {
      theEvent.returnValue = false;
      if(theEvent.preventDefault) theEvent.preventDefault();
    }
  }
</script>

CSS

body  {background:#eee; padding-top: 50px; text-align; center;}
input {display: block; margin: auto; padding: 3px 6px; width: 100px; font-family: sans-serif; font-weight: bold; font-size: 110%; outline: 0; border: 1px solid #444; background: #f4f4f4; color: black; border-radius: 1px; text-align: center; box-shadow: 0 2px 8px #bbb, inset 0 0 0 1px white;}
input:focus {background: white;}

JavaScript

/*
 * COMMENTS:
 * One thing I thought of, you can actually remove maxlength = "3"
 * from the input, and use max.length instead.
 * Why is that? We've currently limited the maximum number to '999',
 * and we know that the string '999' has a length of 3.
 * So, instead of re-defining the maxLength, you can simply ask the
 * code to find it for you :)
 * You just need to replace both maxLength to max.length and remove maxlength
 * property from the input tag. That's all!
 */