Limit number of characters allowed in form input text field


Html Problem Overview

How do I limit or restrict the user to only enter a maximum of five characters in the textbox?

Below is the input field as part of my form:

<input type="text" id="sessionNo" name="sessionNum" />

Is it using something like maxSize or something like that?

Html Solutions

Solution 1 - Html


> 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.

Solution 2 - Html

The simplest way to do so:


So.. Adding this attribute to your control:

<input type="text" 
    onkeypress="return isNumberKey(event)" 
    maxlength="5" />

Solution 3 - Html

Add the following to the header:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitNum) {
	if (limitField.value.length > limitNum) {
		limitField.value = limitField.value.substring(0, limitNum);

    <input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" 
onKeyUp="limitText(this,5);"" />

Solution 4 - Html

According to w3c, the default value for the MAXLENGTH attribute is an unlimited number. So if you don't specify the max a user could cut and paste the bible a couple of times and stick it in your form.

Even if you do specify the MAXLENGTH to a reasonable number make sure you double check the length of the submitted data on the server before processing (using something like php or asp) as it's quite easy to get around the basic MAXLENGTH restriction anyway

Solution 5 - Html

Make it simpler

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

and use an alert to show that max chars have been used.

Solution 6 - Html

<input type="text" maxlength="5">

the maximum amount of letters that can be in the input is 5.

Solution 7 - Html


The maximum number of characters that will be accepted as input. The maxlength attribute specifies the maximum number of characters allowed in the element.

Maxlength W3 schools

<form action="/action_page.php">
    Username: <input type="text" name="usrname" maxlength="5"><br>
    <input type="submit" value="Submit">

Solution 8 - Html

I always do it like this:

$(document).ready(function() {
	var maxChars = $("#sessionNum");
	var max_length = maxChars.attr('maxlength');
	if (max_length > 0) {
		maxChars.on('keyup', function(e) {
			length = new Number(maxChars.val().length);
			counter = max_length - length;


<input name="sessionNum" id="sessionNum" maxlength="5" type="text">
Number of chars: <span id="sessionNum_counter">5</span>

Solution 9 - Html

You can use <input type = "text" maxlength="9"> or

<input type = "number" maxlength="9"> for numbers or <input type = "email" maxlength="9"> for email validation will show up

Solution 10 - Html

<input type="number" id="xxx" name="xxx" oninput="maxLengthCheck(this)" maxlength="10">

function maxLengthCheck(object) {
  if (object.value.length > object.maxLength)
  object.value = object.value.slice(0, object.maxLength)

Solution 11 - Html

Use maxlenght="number of charcters"

<input type="text" id="sessionNo" name="sessionNum" maxlenght="7" />

Solution 12 - Html

The following code includes a counted...

var count = 1;

do {
    function count_down(obj, count){

    let element = document.getElementById('count'+ count);

    element.innerHTML = 80 - obj.value.length;

    if(80 - obj.value.length < 5){ = "firebrick";
    }else{ = "#333";
} while (count < 20); 

.text-input {
    padding: 8px 16px;
    width: 50%;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    font-family: Raleway;
    border: 1px solid dodgerblue;

<p><input placeholder="Title" id="bike-input-title" onkeyup="count_down(this, 3)" maxlength="80"  class="text-input" name="bikeTitle" ></p>
        <span id="count3" style="float: right; font-family: Raleway; font-size:20px; font-weight:600; margin-top:-5px;">80</span><br>

Solution 13 - Html

<input type="text" name="MobileNumber" id="MobileNumber" maxlength="10" onkeypress="checkNumber(event);"  placeholder="MobileNumber">

function checkNumber(key) {
  var inputNumber = document.querySelector("#MobileNumber").value;
  if(key.key >= 0 && key.key <= 9) {
    inputNumber += key.key;
  else {


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBruceyBanditView Question on Stackoverflow
Solution 1 - HtmlJared FarrishView Answer on Stackoverflow
Solution 2 - HtmlNonymView Answer on Stackoverflow
Solution 3 - Htmlb3labsView Answer on Stackoverflow
Solution 4 - HtmlMahdi JaziniView Answer on Stackoverflow
Solution 5 - Htmluser5829707View Answer on Stackoverflow
Solution 6 - HtmlanonymousView Answer on Stackoverflow
Solution 7 - HtmlKondalView Answer on Stackoverflow
Solution 8 - HtmlSašo KrajncView Answer on Stackoverflow
Solution 9 - HtmlBKas DevelopmentView Answer on Stackoverflow
Solution 10 - HtmlP.BanerjeeView Answer on Stackoverflow
Solution 11 - HtmlRahul JainView Answer on Stackoverflow
Solution 12 - HtmlEric CoetzeeView Answer on Stackoverflow
Solution 13 - HtmlYash PatelView Answer on Stackoverflow