Open In App

HTML | DOM Textarea maxlength Property

Improve
Improve
Like Article
Like
Save
Share
Report

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.




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




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


Output:

Before Clicking On Button:

After Clicking On Button:

Supported Browsers: The browser supported by Textarea maxLength Property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 12 Apr, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads