By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,837 Members | 1,357 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,837 IT Pros & Developers. It's quick & easy.

Client side character count - Textbox

P: n/a
In limiting textbox input to 500 characters I would like to include a
dynamic count of characters input while the user is typing into a textbox.
This would obviously be a client side control, possibly a custom validator
with a function written in javascript.
Has anyone done this? Does someone have an example?

Regards
Nov 18 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
In JavaScript, you can use the length property of the value property of the
textbox to get the number of characters. Wire your Event Handler to the
"onchange" property of the textbox, like so:

<script type="text/javascript"><!--
function countChar(str)
{
window.status= str.length + " characters typed";
}
// --></script>
<input type="text" name="MyText" onchange="countChar(this.value)">

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Big things are made up
of lots of little things.
"Jerry" <Je*********@yahoo.com> wrote in message
news:#g**************@TK2MSFTNGP12.phx.gbl...
In limiting textbox input to 500 characters I would like to include a
dynamic count of characters input while the user is typing into a textbox.
This would obviously be a client side control, possibly a custom validator
with a function written in javascript.
Has anyone done this? Does someone have an example?

Regards

Nov 18 '05 #2

P: n/a
If I'm not wrong, there is a maxlength (or something like that) property
in the textbox control.

Stefano Mostarda MCP
Rome Italy

Jerry wrote:
In limiting textbox input to 500 characters I would like to include a
dynamic count of characters input while the user is typing into a textbox.
This would obviously be a client side control, possibly a custom validator
with a function written in javascript.
Has anyone done this? Does someone have an example?

Regards

Nov 18 '05 #3

P: n/a
Jon
this would only show the character count when the user clicks outside the
textbox - what you probably want is to keep a running tally while the users
typing and maybe display it another form field
<script type="text/javascript">
function countChar(str,f){
f.Count.value = str.length
}
</script>
<form>
You've typed <input size=3 type="text" name="Count" value="0"> characters
<input type="text" name="MyText" onkeyup="countChar(this.value,this.form)">
</form>

Jon

"Kevin Spencer" <ke***@takempis.com> wrote in message
news:uT**************@tk2msftngp13.phx.gbl...
In JavaScript, you can use the length property of the value property of the textbox to get the number of characters. Wire your Event Handler to the
"onchange" property of the textbox, like so:

<script type="text/javascript"><!--
function countChar(str)
{
window.status= str.length + " characters typed";
}
// --></script>
<input type="text" name="MyText" onchange="countChar(this.value)">

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.
"Jerry" <Je*********@yahoo.com> wrote in message
news:#g**************@TK2MSFTNGP12.phx.gbl...
In limiting textbox input to 500 characters I would like to include a
dynamic count of characters input while the user is typing into a textbox. This would obviously be a client side control, possibly a custom validator with a function written in javascript.
Has anyone done this? Does someone have an example?

Regards


Nov 18 '05 #4

P: n/a
> this would only show the character count when the user clicks outside the
textbox - what you probably want is to keep a running tally while the users

You have mixed up the lostfocus event with the onchange event. My technique
works just fine, thank you.

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

"Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
news:Ow**************@TK2MSFTNGP10.phx.gbl... this would only show the character count when the user clicks outside the
textbox - what you probably want is to keep a running tally while the users typing and maybe display it another form field
<script type="text/javascript">
function countChar(str,f){
f.Count.value = str.length
}
</script>
<form>
You've typed <input size=3 type="text" name="Count" value="0"> characters
<input type="text" name="MyText" onkeyup="countChar(this.value,this.form)"> </form>

Jon

"Kevin Spencer" <ke***@takempis.com> wrote in message
news:uT**************@tk2msftngp13.phx.gbl...
In JavaScript, you can use the length property of the value property of

the
textbox to get the number of characters. Wire your Event Handler to the
"onchange" property of the textbox, like so:

<script type="text/javascript"><!--
function countChar(str)
{
window.status= str.length + " characters typed";
}
// --></script>
<input type="text" name="MyText" onchange="countChar(this.value)">

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.
"Jerry" <Je*********@yahoo.com> wrote in message
news:#g**************@TK2MSFTNGP12.phx.gbl...
In limiting textbox input to 500 characters I would like to include a
dynamic count of characters input while the user is typing into a textbox. This would obviously be a client side control, possibly a custom validator with a function written in javascript.
Has anyone done this? Does someone have an example?

Regards



Nov 18 '05 #5

P: n/a
Jon
I didn't say yours didn't work :-) I said it doesn't keep a running count
while you're typing (which I think is what the poster wants and is probably
easier for the user) Compare mine with yours to see the difference.

What's a lostfocus event - do you mean onblur? Onchange fires when you click
outside a textbox and the text has changed, onblur fires when you click
outside a textbox wether or not the text has changed, onkeyup fires as soon
as you press and release a key.

Jon

"Kevin Spencer" <ke***@takempis.com> wrote in message
news:Oa**************@TK2MSFTNGP10.phx.gbl...
this would only show the character count when the user clicks outside the textbox - what you probably want is to keep a running tally while the users

You have mixed up the lostfocus event with the onchange event. My

technique works just fine, thank you.

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

"Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
news:Ow**************@TK2MSFTNGP10.phx.gbl...
this would only show the character count when the user clicks outside the textbox - what you probably want is to keep a running tally while the

users
typing and maybe display it another form field
<script type="text/javascript">
function countChar(str,f){
f.Count.value = str.length
}
</script>
<form>
You've typed <input size=3 type="text" name="Count" value="0"> characters <input type="text" name="MyText"

onkeyup="countChar(this.value,this.form)">
</form>

Jon

"Kevin Spencer" <ke***@takempis.com> wrote in message
news:uT**************@tk2msftngp13.phx.gbl...
In JavaScript, you can use the length property of the value property of
the
textbox to get the number of characters. Wire your Event Handler to

the "onchange" property of the textbox, like so:

<script type="text/javascript"><!--
function countChar(str)
{
window.status= str.length + " characters typed";
}
// --></script>
<input type="text" name="MyText" onchange="countChar(this.value)">

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.
"Jerry" <Je*********@yahoo.com> wrote in message
news:#g**************@TK2MSFTNGP12.phx.gbl...
> In limiting textbox input to 500 characters I would like to include a > dynamic count of characters input while the user is typing into a

textbox.
> This would obviously be a client side control, possibly a custom

validator
> with a function written in javascript.
> Has anyone done this? Does someone have an example?
>
> Regards
>
>



Nov 18 '05 #6

P: n/a
My method will indeed keep a running count while you're typing, as each
character typed changes the value of the textbox.

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

"Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
news:#O*************@TK2MSFTNGP11.phx.gbl...
I didn't say yours didn't work :-) I said it doesn't keep a running count
while you're typing (which I think is what the poster wants and is probably easier for the user) Compare mine with yours to see the difference.

What's a lostfocus event - do you mean onblur? Onchange fires when you click outside a textbox and the text has changed, onblur fires when you click
outside a textbox wether or not the text has changed, onkeyup fires as soon as you press and release a key.

Jon

"Kevin Spencer" <ke***@takempis.com> wrote in message
news:Oa**************@TK2MSFTNGP10.phx.gbl...
this would only show the character count when the user clicks outside the textbox - what you probably want is to keep a running tally while the users

You have mixed up the lostfocus event with the onchange event. My

technique
works just fine, thank you.

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

"Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
news:Ow**************@TK2MSFTNGP10.phx.gbl...
this would only show the character count when the user clicks outside the textbox - what you probably want is to keep a running tally while the

users
typing and maybe display it another form field
<script type="text/javascript">
function countChar(str,f){
f.Count.value = str.length
}
</script>
<form>
You've typed <input size=3 type="text" name="Count" value="0"> characters <input type="text" name="MyText"

onkeyup="countChar(this.value,this.form)">
</form>

Jon

"Kevin Spencer" <ke***@takempis.com> wrote in message
news:uT**************@tk2msftngp13.phx.gbl...
> In JavaScript, you can use the length property of the value property of the
> textbox to get the number of characters. Wire your Event Handler to the > "onchange" property of the textbox, like so:
>
> <script type="text/javascript"><!--
> function countChar(str)
> {
> window.status= str.length + " characters typed";
> }
> // --></script>
> <input type="text" name="MyText" onchange="countChar(this.value)">
>
> --
> HTH,
> Kevin Spencer
> .Net Developer
> Microsoft MVP
> Big things are made up
> of lots of little things.
>
>
> "Jerry" <Je*********@yahoo.com> wrote in message
> news:#g**************@TK2MSFTNGP12.phx.gbl...
> > In limiting textbox input to 500 characters I would like to
include a > > dynamic count of characters input while the user is typing into a
textbox.
> > This would obviously be a client side control, possibly a custom
validator
> > with a function written in javascript.
> > Has anyone done this? Does someone have an example?
> >
> > Regards
> >
> >
>
>



Nov 18 '05 #7

P: n/a
Jon
from my last post
"Onchange fires when you click outside a textbox" (ie NOT while you're still
typing in the box)
I didnt make that up :-)

Here's a page with the script you posted
http://fp.roksteady.net/yourscript.htm
here's a page with my script
http://fp.roksteady.net/myscript.htm

see the difference
"Kevin Spencer" <ke***@takempis.com> wrote in message
news:Oc**************@TK2MSFTNGP12.phx.gbl...
My method will indeed keep a running count while you're typing, as each
character typed changes the value of the textbox.

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

"Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
news:#O*************@TK2MSFTNGP11.phx.gbl...
I didn't say yours didn't work :-) I said it doesn't keep a running count while you're typing (which I think is what the poster wants and is

probably
easier for the user) Compare mine with yours to see the difference.

What's a lostfocus event - do you mean onblur? Onchange fires when you

click
outside a textbox and the text has changed, onblur fires when you click
outside a textbox wether or not the text has changed, onkeyup fires as

soon
as you press and release a key.

Jon

"Kevin Spencer" <ke***@takempis.com> wrote in message
news:Oa**************@TK2MSFTNGP10.phx.gbl...
> this would only show the character count when the user clicks outside
the
> textbox - what you probably want is to keep a running tally while
the users

You have mixed up the lostfocus event with the onchange event. My

technique
works just fine, thank you.

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

"Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
news:Ow**************@TK2MSFTNGP10.phx.gbl...
> this would only show the character count when the user clicks outside the
> textbox - what you probably want is to keep a running tally while
the users
> typing and maybe display it another form field
> <script type="text/javascript">
> function countChar(str,f){
> f.Count.value = str.length
> }
> </script>
> <form>
> You've typed <input size=3 type="text" name="Count" value="0">

characters
> <input type="text" name="MyText"
onkeyup="countChar(this.value,this.form)">
> </form>
>
> Jon
>
> "Kevin Spencer" <ke***@takempis.com> wrote in message
> news:uT**************@tk2msftngp13.phx.gbl...
> > In JavaScript, you can use the length property of the value property of
> the
> > textbox to get the number of characters. Wire your Event Handler
to the
> > "onchange" property of the textbox, like so:
> >
> > <script type="text/javascript"><!--
> > function countChar(str)
> > {
> > window.status= str.length + " characters typed";
> > }
> > // --></script>
> > <input type="text" name="MyText" onchange="countChar(this.value)">
> >
> > --
> > HTH,
> > Kevin Spencer
> > .Net Developer
> > Microsoft MVP
> > Big things are made up
> > of lots of little things.
> >
> >
> > "Jerry" <Je*********@yahoo.com> wrote in message
> > news:#g**************@TK2MSFTNGP12.phx.gbl...
> > > In limiting textbox input to 500 characters I would like to

include
a
> > > dynamic count of characters input while the user is typing into

a > textbox.
> > > This would obviously be a client side control, possibly a custom
> validator
> > > with a function written in javascript.
> > > Has anyone done this? Does someone have an example?
> > >
> > > Regards
> > >
> > >
> >
> >
>
>



Nov 18 '05 #8

P: n/a
Doesn't matter to me whether you made it up, or what you're quoting. I've
used it before with success. Are you sure you're not talking about a
server-side ASP.Net event?

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

"Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
news:uR**************@TK2MSFTNGP12.phx.gbl...
from my last post
"Onchange fires when you click outside a textbox" (ie NOT while you're still typing in the box)
I didnt make that up :-)

Here's a page with the script you posted
http://fp.roksteady.net/yourscript.htm
here's a page with my script
http://fp.roksteady.net/myscript.htm

see the difference
"Kevin Spencer" <ke***@takempis.com> wrote in message
news:Oc**************@TK2MSFTNGP12.phx.gbl...
My method will indeed keep a running count while you're typing, as each
character typed changes the value of the textbox.

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

"Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
news:#O*************@TK2MSFTNGP11.phx.gbl...
I didn't say yours didn't work :-) I said it doesn't keep a running count while you're typing (which I think is what the poster wants and is probably
easier for the user) Compare mine with yours to see the difference.

What's a lostfocus event - do you mean onblur? Onchange fires when you

click
outside a textbox and the text has changed, onblur fires when you click outside a textbox wether or not the text has changed, onkeyup fires as

soon
as you press and release a key.

Jon

"Kevin Spencer" <ke***@takempis.com> wrote in message
news:Oa**************@TK2MSFTNGP10.phx.gbl...
> > this would only show the character count when the user clicks outside the
> > textbox - what you probably want is to keep a running tally while the > users
>
> You have mixed up the lostfocus event with the onchange event. My
technique
> works just fine, thank you.
>
> --
> HTH,
> Kevin Spencer
> .Net Developer
> Microsoft MVP
> Big things are made up
> of lots of little things.
>
> "Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
> news:Ow**************@TK2MSFTNGP10.phx.gbl...
> > this would only show the character count when the user clicks outside the
> > textbox - what you probably want is to keep a running tally while the > users
> > typing and maybe display it another form field
> > <script type="text/javascript">
> > function countChar(str,f){
> > f.Count.value = str.length
> > }
> > </script>
> > <form>
> > You've typed <input size=3 type="text" name="Count" value="0">
characters
> > <input type="text" name="MyText"
> onkeyup="countChar(this.value,this.form)">
> > </form>
> >
> > Jon
> >
> > "Kevin Spencer" <ke***@takempis.com> wrote in message
> > news:uT**************@tk2msftngp13.phx.gbl...
> > > In JavaScript, you can use the length property of the value property of
> > the
> > > textbox to get the number of characters. Wire your Event Handler to the
> > > "onchange" property of the textbox, like so:
> > >
> > > <script type="text/javascript"><!--
> > > function countChar(str)
> > > {
> > > window.status= str.length + " characters typed";
> > > }
> > > // --></script>
> > > <input type="text" name="MyText" onchange="countChar(this.value)"> > > >
> > > --
> > > HTH,
> > > Kevin Spencer
> > > .Net Developer
> > > Microsoft MVP
> > > Big things are made up
> > > of lots of little things.
> > >
> > >
> > > "Jerry" <Je*********@yahoo.com> wrote in message
> > > news:#g**************@TK2MSFTNGP12.phx.gbl...
> > > > In limiting textbox input to 500 characters I would like to

include
a
> > > > dynamic count of characters input while the user is typing into a
> > textbox.
> > > > This would obviously be a client side control, possibly a

custom > > validator
> > > > with a function written in javascript.
> > > > Has anyone done this? Does someone have an example?
> > > >
> > > > Regards
> > > >
> > > >
> > >
> > >
> >
> >
>
>



Nov 18 '05 #9

P: n/a
My apologies, Jon. Apparently, it is browser-dependent. I just tried it on
IE 6 and it behaved as you said - not firing until the texgbox lost focus.
You are correct.

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

"Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
news:uR**************@TK2MSFTNGP12.phx.gbl...
from my last post
"Onchange fires when you click outside a textbox" (ie NOT while you're still typing in the box)
I didnt make that up :-)

Here's a page with the script you posted
http://fp.roksteady.net/yourscript.htm
here's a page with my script
http://fp.roksteady.net/myscript.htm

see the difference
"Kevin Spencer" <ke***@takempis.com> wrote in message
news:Oc**************@TK2MSFTNGP12.phx.gbl...
My method will indeed keep a running count while you're typing, as each
character typed changes the value of the textbox.

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

"Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
news:#O*************@TK2MSFTNGP11.phx.gbl...
I didn't say yours didn't work :-) I said it doesn't keep a running count while you're typing (which I think is what the poster wants and is probably
easier for the user) Compare mine with yours to see the difference.

What's a lostfocus event - do you mean onblur? Onchange fires when you

click
outside a textbox and the text has changed, onblur fires when you click outside a textbox wether or not the text has changed, onkeyup fires as

soon
as you press and release a key.

Jon

"Kevin Spencer" <ke***@takempis.com> wrote in message
news:Oa**************@TK2MSFTNGP10.phx.gbl...
> > this would only show the character count when the user clicks outside the
> > textbox - what you probably want is to keep a running tally while the > users
>
> You have mixed up the lostfocus event with the onchange event. My
technique
> works just fine, thank you.
>
> --
> HTH,
> Kevin Spencer
> .Net Developer
> Microsoft MVP
> Big things are made up
> of lots of little things.
>
> "Jon" <jo*******@NOCRAPTHANKStiscali.co.uk> wrote in message
> news:Ow**************@TK2MSFTNGP10.phx.gbl...
> > this would only show the character count when the user clicks outside the
> > textbox - what you probably want is to keep a running tally while the > users
> > typing and maybe display it another form field
> > <script type="text/javascript">
> > function countChar(str,f){
> > f.Count.value = str.length
> > }
> > </script>
> > <form>
> > You've typed <input size=3 type="text" name="Count" value="0">
characters
> > <input type="text" name="MyText"
> onkeyup="countChar(this.value,this.form)">
> > </form>
> >
> > Jon
> >
> > "Kevin Spencer" <ke***@takempis.com> wrote in message
> > news:uT**************@tk2msftngp13.phx.gbl...
> > > In JavaScript, you can use the length property of the value property of
> > the
> > > textbox to get the number of characters. Wire your Event Handler to the
> > > "onchange" property of the textbox, like so:
> > >
> > > <script type="text/javascript"><!--
> > > function countChar(str)
> > > {
> > > window.status= str.length + " characters typed";
> > > }
> > > // --></script>
> > > <input type="text" name="MyText" onchange="countChar(this.value)"> > > >
> > > --
> > > HTH,
> > > Kevin Spencer
> > > .Net Developer
> > > Microsoft MVP
> > > Big things are made up
> > > of lots of little things.
> > >
> > >
> > > "Jerry" <Je*********@yahoo.com> wrote in message
> > > news:#g**************@TK2MSFTNGP12.phx.gbl...
> > > > In limiting textbox input to 500 characters I would like to

include
a
> > > > dynamic count of characters input while the user is typing into a
> > textbox.
> > > > This would obviously be a client side control, possibly a

custom > > validator
> > > > with a function written in javascript.
> > > > Has anyone done this? Does someone have an example?
> > > >
> > > > Regards
> > > >
> > > >
> > >
> > >
> >
> >
>
>



Nov 18 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.