How to limit number of characters for a textarea tag

Is there a way to have a maximum number of characters for a textarea tag?  I am creating a web-based order entry interface to a system that can only allow up to 600 characters for Order Notes.  I want something like this:

<textarea name="OrderNotes" rows="4" cols="60" maxcharacters="600"></textarea>

Any suggestions on how to do this?  Thanks, sulzener
sulzenerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

James RodgersWeb Applications DeveloperCommented:
try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
</head>

<body>
<textarea name="OrderNotes" rows="4" cols="60" maxcharacters="600" onkeypress="if(this.value.length >=600){ return false; }else {document.getElementById('mine').innerText=this.value.length}"></textarea>

<div id="mine"></div>

</body>
</html>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mrichmonCommented:
You can't without using javascript.  Since you are forced to use javascript it is nice to give something that also includes a char remaining counter like this:

function textCounter(field,cntfield,maxlimit)
{
      document.getElementById(cntfield).innerHTML = maxlimit - field.value.length;
      if (field.value.length > maxlimit)
            document.getElementById(cntfield).style.color = "red";
      else
            document.getElementById(cntfield).style.color = "black";
}


<span id="remChar"></span>&nbsp;characters remaining <small>(required)<small><br>
<textarea name="CommentBox" rows=5 COLS=85 WRAP MAXLENGTH=1000 onKeyUp="textCounter(this,'remChar',1000)"></textarea>
mrichmonCommented:
Jester showed something similar while I was typing. :o)

Of course you don't need the maxlength in my code nor the maxcharacters in Jester's code.  It is really the javascript in both cases that does the restriction.

or you can test serverside.

But nothing like the maxlength of a normal input is available
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

James RodgersWeb Applications DeveloperCommented:
yea i was just about to repost with the maxcharacters bit removed - doesn't exist for this input
sulzenerAuthor Commented:
Jester_48's post worked perfectly.  I was curious and tried mrichmon's.  Where do I put the function logic?  Do I wrap it in a
<javascript></javascipt>  Thanks to both.
James RodgersWeb Applications DeveloperCommented:
yes mrichmons would be something like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
     <title>Untitled</title>

<script>
function textCounter(field,cntfield,maxlimit)
{
     document.getElementById(cntfield).innerHTML = maxlimit - field.value.length;
     if (field.value.length > maxlimit)
          document.getElementById(cntfield).style.color = "red";
     else
          document.getElementById(cntfield).style.color = "black";
}


</script>
</head>

<body>
<span id="remChar"></span>&nbsp;characters remaining <small>(required)<small><br>
<textarea name="CommentBox" rows=5 COLS=85 WRAP MAXLENGTH=1000 onKeyUp="textCounter(this,'remChar',1000)"></textarea>

</body>
</html>
mrichmonCommented:
Yes, but to be correct add this:

<script>

becomes

<script type="text/javascript">
James RodgersWeb Applications DeveloperCommented:
just doin the quick and dirty, of course the language and type should always be specified, to prevent errors, when using the script tag
sulzenerAuthor Commented:
Thanks, I appreciate it.
James RodgersWeb Applications DeveloperCommented:
glad i could help

thanks for the points

nice of you to split it, a lot of users wouldn't have
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.