Limit the number of characters in a text area...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
rlogin
Forum Newbie
Posts: 19
Joined: Fri Oct 18, 2002 2:39 am

Limit the number of characters in a text area...

Post by rlogin »

Hi all,
Has any body tried to limit the number of characters that may be typed into a text area?
An example would be the way http://www.msn.com tries to limit in any of post your view text area for any article. If i try to type more than say 100 characters in the post your view text area, i get an alert saying you have crossed the limit.
I have been trying to do it but no success so far.
Rgds.
User avatar
cavey
Forum Newbie
Posts: 4
Joined: Wed Oct 30, 2002 12:50 pm

Post by cavey »

thats javascript, often used on "send sms" pages, check their source to see how its done :)
ganzina
Forum Newbie
Posts: 8
Joined: Mon Nov 04, 2002 4:18 pm
Location: California

Limit the number of characters in a text area...

Post by ganzina »

Hi,

This is the JavaScript code I use to limit a field to 100 characters. I alert the user, truncate the text to the first 100 characters and then go back to the field.

Code: Select all

function doCount(myfield) {
	var newVal = myfield; 
	if (newVal.length > 100) {
	  alert('This field is limited to 100 characters.');
	  document.formname.fieldname.value = document.formname.fieldname.value.substring(100);
	  document.formname.fieldname.focus()
	}
}
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

try this code

Post by phpScott »

the only dif between my code and ganziva is that the fucus() event with blank out the text area where select() will not erease the text.

Code: Select all

<script language=javascript>
function doCount() 
&#123;
   var f=document.form1;
   if (f.fillIn.value.length > 10) &#123;
     alert('This field is limited to 100 characters.');
	 tempString=f.fillIn.value;
	 f.fillIn.value=tempString.substring(0,10)
	 f.fillIn.select();
   &#125;
&#125;
</script>
and body of html page

Code: Select all

<body>
<form name="form1" method="post" action="" onSubmit="doCount(this)">
  <textarea name="fillIn"></textarea><br>
 <input type="button" name="test" value="test" onClick="doCount()">
</form>

</body>
have fun
ganzina
Forum Newbie
Posts: 8
Joined: Mon Nov 04, 2002 4:18 pm
Location: California

More about "Focus"

Post by ganzina »

Just to clarify..."focus" does not clear out the contents of a form object. Using "focus" allows you to have the field active (outlined) and the cursor goes to the end of the text in the form object.
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

your right

Post by phpScott »

my javaScript book lied to me about the difference between focus() and select(). Sorry,
Focus is as ganzina stated and select() will hightligh all the text in the given field.

phpScott
f1nutter
Forum Contributor
Posts: 125
Joined: Wed Jun 05, 2002 12:08 pm
Location: London

Post by f1nutter »

As you are limiting your self to only 100 characters, what about trying

Code: Select all

<input type=text size=50 maxlength=100>
:?:

Not as elegant as text area, but it will not accept more than 100 characters, and you don't need any JavaScript.
Post Reply