[html] How can I limit possible inputs in a HTML5 "number" element?

For <input type="number"> element, maxlength is not working. How can I restrict the maxlength for that number element?

This question is related to html input numbers max

The answer is


More relevant attributes to use would be min and max.


Another option is to just add a listener for anything with the maxlength attribute and add the slice value to that. Assuming the user doesn't want to use a function inside every event related to the input. Here's a code snippet. Ignore the CSS and HTML code, the JavaScript is what matters.

_x000D_
_x000D_
// Reusable Function to Enforce MaxLength_x000D_
function enforce_maxlength(event) {_x000D_
  var t = event.target;_x000D_
  if (t.hasAttribute('maxlength')) {_x000D_
    t.value = t.value.slice(0, t.getAttribute('maxlength'));_x000D_
  }_x000D_
}_x000D_
_x000D_
// Global Listener for anything with an maxlength attribute._x000D_
// I put the listener on the body, put it on whatever._x000D_
document.body.addEventListener('input', enforce_maxlength);
_x000D_
label { margin: 10px; font-size: 16px; display: block }_x000D_
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }_x000D_
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }
_x000D_
<label for="test_input">Text Input</label>_x000D_
<input id="test_input" type="text" maxlength="5"/>_x000D_
<span>set to 5 maxlength</span>_x000D_
_x000D_
<br>_x000D_
_x000D_
<label for="test_input">Number Input</label>_x000D_
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>_x000D_
<span>set to 2 maxlength, min 0 and max 99</span>
_x000D_
_x000D_
_x000D_


I know there's an answer already, but if you want your input to behave exactly like the maxlength attribute or as close as you can, use the following code:

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();

Or if your max value is for example 99 and minimum 0, you can add this to input element (your value will be rewrited by your max value etc.)

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

Then (if you want), you could check if is input really number


I use a simple solution for all inputs (with jQuery):

$(document).on('input', ':input[type="number"][maxlength]', function () {
    if (this.value.length > this.maxLength) {
        this.value = this.value.slice(0, this.maxLength); 
    }
});

The code select all input type="number" element where maxlength has defined.


Since I was look to validate and only allow integers I took one the existing answers and improve it

The idea is to validate from 1 to 12, if the input is lower than 1 it will be set to 1, if the input is higher than 12 it will be set to 12. Decimal simbols are not allowed.

<input id="horaReserva" type="number" min="1" max="12" onkeypress="return isIntegerInput(event)" oninput="maxLengthCheck(this)">

function maxLengthCheck(object) {
    if (object.value.trim() == "") {

    }
    else if (parseInt(object.value) > parseInt(object.max)) {
        object.value = object.max ;
    }
    else if (parseInt(object.value) < parseInt(object.min)) {
        object.value = object.min ;
    }
}

function isIntegerInput (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();
        }
    }
}

Max length will not work with <input type="number" the best way i know is to use oninput event to limit the maxlength. Please see the below code for simple implementation.

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

it's very simple, with some javascript you can simulate a maxlength, check it out:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

As stated by others, min/max is not the same as maxlength because people could still enter a float that would be larger than the maximum string length that you intended. To truly emulate the maxlength attribute, you can do something like this in a pinch (this is equivalent to maxlength="16"):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

You can combine all of these like this:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>


Update:
You might also want to prevent any non-numeric characters to be entered, because object.length would be an empty string for the number inputs, and therefore its length would be 0. Thus the maxLengthCheck function won't work.

Solution:
See this or this for examples.

Demo - See the full version of the code here:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Update 2: Here's the update code: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Update 3: Please note that allowing more than a decimal point to be entered can mess up with the numeral value.


You can specify it as text, but add pettern, that match numbers only:

<input type="text" pattern="\d*" maxlength="2">

It works perfect and also on mobile ( tested on iOS 8 and Android ) pops out the number keyboard.


Maycow Moura's answer was a good start. However, his solution means that when you enter the second digit all editing of the field stops. So you cannot change values or delete any characters.

The following code stops at 2, but allows editing to continue;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

Lets say you wanted the maximum allowed value to be 1000 - either typed or with the spinner.

You restrict the spinner values using: type="number" min="0" max="1000"

and restrict what is typed by the keyboard with javascript: onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }"

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

This might help someone.

With a little of javascript you can search for all datetime-local inputs, search if the year the user is trying to input, greater that 100 years in the future:

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });

Ugh. It's like someone gave up half way through implementing it and thought no one would notice.

For whatever reason, the answers above don't use the min and max attributes. This jQuery finishes it up:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

It would probably also work as a named function "oninput" w/o jQuery if your one of those "jQuery-is-the-devil" types.


If you are looking for a Mobile Web solution in which you wish your user to see a number pad rather than a full text keyboard. Use type="tel". It will work with maxlength which saves you from creating extra javascript.

Max and Min will still allow the user to Type in numbers in excess of max and min, which is not optimal.


You can specify the min and max attributes, which will allow input only within a specific range.

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

This only works for the spinner control buttons, however. Although the user may be able to type a number greater than the allowed max, the form will not submit.

Chrome's validation message for numbers greater than the max
Screenshot taken from Chrome 15

You can use the HTML5 oninput event in JavaScript to limit the number of characters:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

As I found out you cannot use any of onkeydown, onkeypress or onkeyup events for a complete solution including mobile browsers. By the way onkeypress is deprecated and not present anymore in chrome/opera for android (see: UI Events W3C Working Draft, 04 August 2016).

I figured out a solution using the oninput event only. You may have to do additional number checking as required such as negative/positive sign or decimal and thousand separators and the like but as a start the following should suffice:

_x000D_
_x000D_
function checkMaxLength(event) {_x000D_
 // Prepare to restore the previous value._x000D_
 if (this.oldValue === undefined) {_x000D_
  this.oldValue = this.defaultValue;_x000D_
 }_x000D_
_x000D_
 if (this.value.length > this.maxLength) {_x000D_
  // Set back to the previous value._x000D_
  this.value = oldVal;_x000D_
 }_x000D_
 else {_x000D_
  // Store the previous value._x000D_
  this.oldValue = this.value;_x000D_
  _x000D_
  // Make additional checks for +/- or ./, etc._x000D_
  // Also consider to combine 'maxlength'_x000D_
  // with 'min' and 'max' to prevent wrong submits._x000D_
 }_x000D_
}
_x000D_
_x000D_
_x000D_

I would also recommend to combine maxlength with min and max to prevent wrong submits as stated above several times.


You can try this as well for numeric input with length restriction

<input type="tel" maxlength="3" />

I had this problem before and I solved it using a combination of html5 number type and jQuery.

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

script:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

I don't know if the events are a bit overkill but it solved my problem. JSfiddle


<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

or if you want to be able enter nothing

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

a simple way to set maxlength for number inputs is:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

HTML Input

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });

Simple solution which will work on,

  • Input scroll events

  • Copy paste via keyboard

  • Copy paste via mouse

  • Input type etc cases

    <input id="maxLengthCheck" 
           name="maxLengthCheck" 
           type="number" 
           step="1" 
           min="0" 
           oninput="this.value = this.value > 5 ? 5 : Math.abs(this.value)" />
    

See there is condition on this.value > 5, just update 5 with your max limit.

Explanation:

  • If our input number is more then our limit update input value this.value with proper number Math.abs(this.value)

  • Else just make it to your max limit which is again 5.


_x000D_
_x000D_
//For Angular I have attached following snippet.
_x000D_
<div ng-app="">_x000D_
  <form>_x000D_
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">_x000D_
  </form>_x000D_
  <h1>You entered: {{number}}</h1>_x000D_
</div>
_x000D_
_x000D_
_x000D_

If you use "onkeypress" event then you will not get any user limitations as such while developing ( unit test it). And if you have requirement that do not allow user to enter after particular limit, take a look of this code and try once.


As with type="number", you specify a max instead of maxlength property, which is the maximum possible number possible. So with 4 digits, max should be 9999, 5 digits 99999 and so on.

Also if you want to make sure it is a positive number, you could set min="0", ensuring positive numbers.


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to input

Angular 4 - get input value React - clearing an input value after form submit Min and max value of input in angular4 application Disable Button in Angular 2 Angular2 - Input Field To Accept Only Numbers How to validate white spaces/empty spaces? [Angular 2] Can't bind to 'ngModel' since it isn't a known property of 'input' Mask for an Input to allow phone numbers? File upload from <input type="file"> Why does the html input with type "number" allow the letter 'e' to be entered in the field?

Examples related to numbers

how to display a javascript var in html body How to label scatterplot points by name? Allow 2 decimal places in <input type="number"> Why does the html input with type "number" allow the letter 'e' to be entered in the field? Explanation on Integer.MAX_VALUE and Integer.MIN_VALUE to find min and max value in an array Input type "number" won't resize C++ - how to find the length of an integer How to Generate a random number of fixed length using JavaScript? How do you check in python whether a string contains only numbers? Turn a single number into single digits Python

Examples related to max

Min and max value of input in angular4 application numpy max vs amax vs maximum mongodb how to get max value from collections Python find min max and average of a list (array) Max length UITextField How to find the highest value of a column in a data frame in R? MAX function in where clause mysql Check if all values in list are greater than a certain number How do I get the max and min values from a set of numbers entered? SQL: Group by minimum value in one field while selecting distinct rows