For `<input type="number">`

element, `maxlength`

is not working. How can I restrict the `maxlength`

for that number element?

# html – How can I limit possible inputs in a HTML5 “number” element?

## The Question :

*384 people think this question is useful*

*The Question Comments :*

- For people looking a better solution, this one is best: stackoverflow.com/questions/9361193/…
- max attribute doesn’t work in chrome browser in android tablet.
- @ÜnsalKorkmaz: that solution has the disadvantage that it does not bring up the number keypad on android devices

## The Answer 1

*365 people think this answer is useful*

And you can add a `max`

attribute that will specify the highest possible number that you may insert

<input type="number" max="999" />

if you add both a `max`

and a `min`

value you can specify the range of allowed values:

<input type="number" min="1" max="999" />

The above will still **not** stop a user from manually entering a value outside of the specified range. Instead he will be displayed a popup telling him to enter a value within this range upon submitting the form as shown in this screenshot:

## The Answer 2

*122 people think this answer is useful*

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.

^{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); } }

## The Answer 3

*87 people think this answer is useful*

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.

## The Answer 4

*79 people think this answer is useful*

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.

## The Answer 5

*29 people think this answer is useful*

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;" />

## The Answer 6

*26 people think this answer is useful*

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

## The Answer 7

*18 people think this answer is useful*

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.

## The Answer 8

*14 people think this answer is useful*

//For Angular I have attached following snippet.

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

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.

## The Answer 9

*13 people think this answer is useful*

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; }">

## The Answer 10

*12 people think this answer is useful*

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.

// Reusable Function to Enforce MaxLength function enforce_maxlength(event) { var t = event.target; if (t.hasAttribute('maxlength')) { t.value = t.value.slice(0, t.getAttribute('maxlength')); } } // Global Listener for anything with an maxlength attribute. // I put the listener on the body, put it on whatever. document.body.addEventListener('input', enforce_maxlength);

label { margin: 10px; font-size: 16px; display: block } input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px } span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }

<label for="test_input">Text Input</label> <input id="test_input" type="text" maxlength="5"/> <span>set to 5 maxlength</span> <br> <label for="test_input">Number Input</label> <input id="test_input" type="number" min="0" max="99" maxlength="2"/> <span>set to 2 maxlength, min 0 and max 99</span>

## The Answer 11

*11 people think this answer is useful*

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" />

## The Answer 12

*8 people think this answer is useful*

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)">

## The Answer 13

*7 people think this answer is useful*

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

## The Answer 14

*6 people think this answer is useful*

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);"

## The Answer 15

*6 people think this answer is useful*

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); }" />

## The Answer 16

*5 people think this answer is useful*

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.

## The Answer 17

*4 people think this answer is useful*

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.

## The Answer 18

*4 people think this answer is useful*

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; } });

## The Answer 19

*3 people think this answer is useful*

<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" />

## The Answer 20

*2 people think this answer is useful*

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:

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

I would also recommend to combine `maxlength`

with `min`

and `max`

to prevent wrong submits as stated above several times.

## The Answer 21

*1 people think this answer is useful*

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

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

## The Answer 22

*1 people think this answer is useful*

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();

## The Answer 23

*0 people think this answer is useful*

More relevant attributes to use would be `min`

and `max`

.

## The Answer 24

*0 people think this answer is useful*

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); } }) });

## The Answer 25

*0 people think this answer is useful*

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.

## The Answer 26

*0 people think this answer is useful*

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.