• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / HTML / How to Give a Textarea a Max Length

How to Give a Textarea a Max Length

July 25, 2022 Leave a Comment

To give a textarea field a maxlength, we can simply use the maxlength attribute in HTML.

<textarea maxlength="100"></textarea>

Let’s see an example below.


In this simple example, we will have a form with a textarea that we simply set to have a maxlength of 50 characters. We do this by adding a maxlength property to the textarea.

Here is our form to try out. Put in an address and try to add more characters to get it over 50.

Code Output:






Full Code:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="lname">Address:</label>
  <textarea maxlength="50"></textarea>
  <button type="submit" value="Submit">Submit</button>
</form>

Set the Textarea Maxlength Using JavaScript

We can also set the maxlength of a textarea using JavaScript. To do this, we simply need to use the getElementById() method and target the maxLength property.

document.getElementById("textarea1").maxLength = 10;

Let’s see this in a simple example.

Here is a simple form:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="lname">Address:</label>
  <textarea id="textarea1"></textarea>
  <div id="click-me" onclick="setNewMaxlength()">Change maxlength of the textarea above to 10 characters</div>
</form>

For our JavaScript code, we will simply target the id of the textarea, clear any text we have in there, and then set the new maxlength.

We will use an onclick event to call the function setNewMaxlength() which we will create below.

Here is the JavaScript code:

function setNewMaxlength(){
  document.getElementById("textarea1").value = "";
  document.getElementById("textarea1").maxLength = 10;
};

The final code and output for this example are below:

Code Output:




Change maxlength of the textarea above to 10 characters

Full Code:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="lname">Address:</label>
  <textarea maxlength="50"></textarea>
  <button type="submit" value="Submit">Submit</button>
</form>

<script>

function setNewMaxlength(){
  document.getElementById("textarea1").value = "";
  document.getElementById("textarea1").maxLength = 10;
};

</script>

Hopefully this article has been useful for you to learn how to give a textarea maxlength.

Other Articles You'll Also Like:

  • 1.  How to Make an HTML List Without Bullets
  • 2.  Can a div Have Two ids?
  • 3.  Sort List of Divs with Data Attribute with Radio Buttons Using Javascript
  • 4.  How to Filter a List of Divs with a Text Input Bar Using Javascript
  • 5.  What is the Correct HTML for Making a Text Area?
  • 6.  How Do You Select All p Elements Inside a Div Element?
  • 7.  What is the Correct HTML for Making a Text Input Field?
  • 8.  HTML superscript – How to Raise Text in HTML
  • 9.  What is the Correct HTML for Making a Drop-Down List?
  • 10.  HTML span width – Set the Width of a Span in HTML

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy