HTML | DOM Textarea maxlength Property

Last Updated : 12 Apr, 2019

The DOM Textarea maxlength Property is used to set or return the value of the maxlength attribute of a textarea field. It specifies the maximum number of characters that have been allowed in the Element. Syntax:

It is used to return the maxLength property:
```
textareaObject.maxLength
```
It is used to set the maxLength property:
```
textareaObject.maxLength = number
```

Property Values

number: It specifies a maximum number of characters that are allowed in the Textarea Element.

Return Value: It returns a numeric value which represents the maximum number of characters that have been allowed in the Textarea field. Example-1: HTML Program to illustrate how to return the maxlength property.

html

<!DOCTYPE html>
<html>

<body>
    <center>
        <h1 style="color:green;
                   font-style:italic;">
          GeeksforGeeks
      </h1>
      
        <h2 style="color:green;
                   font-style:italic;">
          DOM Textarea maxlength Property
      </h2>
      
        <textarea rows="4" 
                  cols="50"
                  id="GFG" 
                  maxlength="6">
          write here....
      </textarea>
        <br>
        <br>
      
        <button onclick="myGeeks()">
          Submit
      </button>

        <p id="sudo"></p>

        <script>
            function myGeeks() {
              
             // Return max length allowed in the textarea field.
             var x = document.getElementById("GFG").maxLength;
              
             document.getElementById("sudo").innerHTML =
             "There are only " + x + " maximum characters" +
             "are allowed in a Textarea Field.";;
            }
        </script>
</body>

</html>

Output: Before Clicking On Button:

After Clicking On Button :

Example-2 : HTML Program to illustrate how to set the maxlength property.

html

 
<!DOCTYPE html>
<html>

<body>
    <center>
        <h1 style="color:green;
                   font-style:italic;">
          GeeksforGeeks
      </h1>
      
        <h2 style="color:green;
                   font-style:italic;">
          DOM Textarea maxlength Property
      </h2>
      
      <textarea rows="4" 
                cols="50" 
                id="GFG"
                maxlength="6">
        write here....
      </textarea>
      <br>
      <br>
      
      <button onclick="myGeeks()">
        Submit
      </button>

        <p id="sudo"></p>

        <script>
            function myGeeks() {
              
                // Set maxlength 4.
                var x =
                document.getElementById("GFG").maxLength = "4"
                
                document.getElementById("sudo").innerHTML =
                  "Maximum number of characters allowed"+
                "in the text area is now 4.";
                "4"
            }
        </script>
  </center>
</body>

</html>