Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Textbox character counter

Status
Not open for further replies.
Craigieboy

Craigieboy

Programmer
May 25, 2001
71
GB
Hi all.

I would be eternally grateful if someone could provide code on how to do the following...

I have an Intranet page with a one-line textbox. I require the user to be only allowed to enter 100 characters into this textbox. The validation, etc on this is straight forward to implement.

What I would like to do is add a counter at the side of the textbox that counts from 100 down to 0 as the user types - and then blocks the user from infilling anymore when at 0. Then, should the user delete any characters the counter rises again.

My goal is to provide the user with a constant visual on how much space they have in the textbox for further input.

I saw this done ages and ages ago and without checking the source code presumed it was JavaScript that was handling it.

With thanks in advance for any help,
Craig
 
Sort by date Sort by votes
Hi Craig, this will work well:

<form name=form1>
<input type=text name=tbox maxlength=100 onkeydown=&quot;javascript:var x=100-this.value.length-1;document.all.vmax.innerHTML='remaining: '+x+' caracteres';&quot;>
<b id=vmax>remaining: 100 caracteres</b>
</form>

I hope this help u.

Sergio M. Netto.
 
Upvote 0 Downvote
Here it is:

<html>
<head>
<script>

function check(a) {

if (a.length >= 100)
document.form1.txt1.value = a.substring(0, a.length-1)

document.form1.txt2.value = 99 - a.length;

}
</script></script>
</head>
<body>

<form name=form1>

<input type=text name=txt1 value=&quot;&quot; onKeyPress=&quot;check(this.value)&quot;>

<input type=text name=txt2 value=&quot;100&quot;>

</form>
</body>
</html>

The only thing is missing is that the counter don't rise again when user delete characters.
 
Upvote 0 Downvote
just copy the code below and save as html ... u get what u want...:



<HTML>

<HEAD>

<script language=javascript>
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);

else
countfield.value = maxlimit - field.value.length;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#c6c6c6 >
<FORM >

<INPUT id=txtMessage name=txtMessage onKeyDown=&quot;textCounter(this.form.txtMessage,this.form.remLen,100);&quot; onFocus=&quot;textCounter(this.form.txtMessage,this.form.remLen,100);&quot; onKeyUp=&quot;textCounter(this.form.txtMessage,this.form.remLen,100);&quot;>

<input readonly type=text name=remLen size=3 maxlength=3 value=&quot;140&quot;>
</FORM>
</BODY>
</HTML>


Cheers!!!

srinu...
 
Upvote 0 Downvote
Why not just set maxsize of the text field to 100 ( max size=&quot;100&quot; )

copy and paste this:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
function lengthChecker()
{
var s = document.testForm.elements[&quot;tfUserInput&quot;].value;
var lengthOfString = s.length;

if( lengthOfString > 99 )
{
alert(&quot;Maximum string length reached.&quot;);
}
document.testForm.elements[&quot;tfTally&quot;].value = lengthOfString + 1;

}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM METHOD=POST ACTION=&quot;&quot; name=&quot;testForm&quot;>
<INPUT TYPE=&quot;text&quot; NAME=&quot;tfUserInput&quot; size=&quot;50&quot; maxlength=&quot;100&quot; onKeyPress=&quot;lengthChecker();&quot;>
<INPUT TYPE=&quot;text&quot; NAME=&quot;tfTally&quot; size=&quot;3&quot;>

</FORM>
</BODY>
</HTML>
 
Upvote 0 Downvote
Wow! That was the quickest response ever! [2thumbsup]

Thank you all who contributed to my post - it was really appreciated and has instantly solved my problem.

Kind regards,
Craig
 
Upvote 0 Downvote
The only one who gets coffee is SrinuReddy.
His script fulfills this task: &quot;if user delete any characters the counter rises again&quot;, white other scripts doesn't.
Craig's script also does this, but I don't give him anything unless he modifies it to work in all browsers, not only in IE.

 
Upvote 0 Downvote
Yeah, three cups of coffee for SrinuReddy - it was his script that I went with, as starway rightly states, it fulfills the task!

My users find it v. useful and also reckon it's &quot;cool&quot; which is always a good thing. I'm not taking all the credit for it... honest (hee hee hee).

Craig
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
378
ggriffit
ggriffit
damipera
  • Locked
  • Question
A TextBox Should Be Filled In 1
Replies
4
Views
298
damipera
damipera
Marine1969
  • Locked
  • Question
Ajax textbox and value
Replies
4
Views
338
Marine1969
Marine1969
Pudsters
  • Locked
  • Question
Populate text box based on other textbox 1
Replies
2
Views
366
Pudsters
Pudsters
Ihechi
  • Locked
  • Question
Either check a checkbox or fill out the textboxes in Gridview with JS. Any ideas how?
Replies
5
Views
383
Ihechi
Ihechi

Part and Inventory Search

Sponsor

Back
Top