HTML | DOM Input Text maxLength Property

Last Updated : 13 Oct, 2022

The DOM Input Text maxLength Property in HTML DOM is used to set or return the value of maxlength attribute of a Text Input Field. It specifies the maximum number of characters that have been allowed in the text field. The default value of Input Text maxLength property is 524288.

Syntax:

It returns the Input Text maxLength property.

textObject.maxLength

It is used to set the Input text maxLength property.

textObject.maxLength = number

Property Values: It contains a single value number which is used to specify the maximum number of characters that are allowed in the text maxlength Field.

Return Value: It returns a numeric value which represents the maximum number of character that has been allowed in the text maxlength field.

Example 1: This example illustrates how to return the Input text maxLength property.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        HTML DOM Input Text maxLength Property
    </title> 
</head> 
<body style="text-align:center;"> 
    <h1>GeeksForGeeks</h1> 
    <h2>DOM Input Text maxLength Property</h2> 
    <form id="myGeeks">
        <input type="text" id="text_id" 
        name="geeks" pattern="[A-Za-z]{3}"> 
    </form>
    <br>
    <button onclick="myGeeks()">Click Here!</button> 
    <p id="GFG" style="font-size:20px;"></p> 
    
    <!-- Script to set the maxLength Property-->
    <script> 
        function myGeeks() { 
            var txt = document.getElementById("text_id").maxLength;
            document.getElementById("GFG").innerHTML = txt;
        } 
    </script> 
</body> 
</html>

Output:

Before clicking on the button:

After clicking on the button:

Example-2: This Example illustrates how to set the property.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        HTML DOM Input Text maxLength Property
    </title> 
</head> 
<body style="text-align:center;"> 
    <h1>GeeksForGeeks</h1> 
    <h2>DOM Input Text maxLength Property</h2> 
    <form id="myGeeks">
        <input type="text" id="text_id" 
            name="geeks" maxlength="60"> 
    </form>
    <br>
    <button onclick="myGeeks()">Click Here!</button> 
    <p id="GFG" style="font-size:20px;"></p> 
    
    <!-- script to set the maxLength Property-->
    <script> 
        function myGeeks() { 
            var txt = document.getElementById("text_id").maxLength;
            document.getElementById("GFG").innerHTML = 
        "The value of the maxLength attribute was changed to " + txt;
        } 
    </script> 
</body> 
</html>