Limit Number of Characters Allowed in Form Input Text Field

Limit number of characters allowed in form input text field

maxlength:

The maximum number of characters that will be accepted as input. This can be greater that specified by SIZE , in which case the field
will scroll appropriately. The default is unlimited.

<input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />

However, this may or may not be affected by your handler. You may need to use or add another handler function to test for length, as well.

Limit number of characters in input type number

Note: charCode is non-standard and deprecated, whereas keyCode is simply deprecated.

Check this code

JavaScript

<script>
function check(e,value)
{
    //Check Charater
    var unicode=e.charCode? e.charCode : e.keyCode;
    if (value.indexOf(".") != -1)if( unicode == 46 )return false;
    if (unicode!=8)if((unicode<48||unicode>57)&&unicode!=46)return false;
}
function checkLength()
{
    var fieldLength = document.getElementById('txtF').value.length;
    //Suppose u want 4 number of character
    if(fieldLength <= 4){
        return true;
    }
    else
    {
        var str = document.getElementById('txtF').value;
        str = str.substring(0, str.length - 1);
        document.getElementById('txtF').value = str;
    }
}

and HTML input with number type below

onInput //Is fired also if value change from the side arrows of field in Chrome browser

<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength()" />

Fiddle Demo

Update -- Little bit generic code example

Change above function into this one

function checkLength(len,ele){
  var fieldLength = ele.value.length;
  if(fieldLength <= len){
    return true;
  }
  else
  {
    var str = ele.value;
    str = str.substring(0, str.length - 1);
    ele.value = str;
  }
}

In HTML use like this

<!-- length 4 -->    
<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength(4,this)" />
<!-- length 5 -->    
<input  type="number" onKeyPress="return check(event,value)" onInput="checkLength(5,this)" />
<!-- length 2 -->    
<input  type="number" onKeyPress="return check(event,value)" onInput="checkLength(2,this)" />

Demo

Maxlength for input type number

If you want a maximum of 5 digits in the number, you can use the largest 5 digit number and set that as the max attribute for the input:

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

The above will only maximize the number to 99999, but will not disallow input of more than 5 characters. This can't be done with HTML alone.

It can, though, be done with JavaScript. For example:

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

All the code above does is, oninput, it checks the number of characters in the input, and if that is exceeding the number of characters specified in maxlength, it deletes the character.

---

Source: maxlength ignored for input type="number" in Chrome

limit imput length to max 10 chars

Simplest approach, vanilla JavaScript. JSFiddle.

JS:

let name = document.getElementById('name');

name.addEventListener('keyup', () => {
    if (name.value.length > 10) {
        name.value = name.value.slice(0, 10);
    }
})

HTML:

<input type="text" id="name">

How to restrict number of characters that can be entered in HTML5 number input field on iPhone

Example

JS

function limit(element)
{
    var max_chars = 2;

    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
}

HTML

<input type="number" onkeydown="limit(this);" onkeyup="limit(this);">

If you are using jQuery you can tidy up the JavaScript a little:

JS

var max_chars = 2;

$('#input').keydown( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});

$('#input').keyup( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});

HTML

<input type="number" id="input">

---

Related Topics