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

how to display how many left to type in the text box

100+
P: 254
Hi

I want to display the number of character to type in a textbox when ever user types a character to the text box using javascript

How can I do that?
Feb 4 '08 #1
Share this Question
Share on Google+
12 Replies


acoder
Expert Mod 15k+
P: 16,027
Assuming you have something like:
Expand|Select|Wrap|Line Numbers
  1. <input type="text" id="textBox" name="textBox" maxlength="50" onkeyup="charCount(this.maxLength);"><span id="charsLeft">50 characters left.</span>
code like this should do the trick:
Expand|Select|Wrap|Line Numbers
  1. function charCount(remaining) {
  2.   var textBox = document.getElementById("textBox");
  3.   var spanObj = document.getElementById("charsLeft");
  4.   var charsLeft = remaining - textBox.value.length;
  5.   if (charsLeft <= 0) {
  6.     charsLeft = 0;
  7.     textBox.value = textBox.value.substring(0,remaining);
  8.   }
  9.   spanObj.innerHTML = charsLeft + " characters left.";
  10. }
Feb 4 '08 #2

100+
P: 254
Assuming you have something like:
Expand|Select|Wrap|Line Numbers
  1. <input type="text" id="textBox" name="textBox" maxlength="50" onkeyup="charCount(this.maxLength);"><span id="charsLeft">50 characters left.</span>
code like this should do the trick:
Expand|Select|Wrap|Line Numbers
  1. function charCount(remaining) {
  2.   var textBox = document.getElementById("textBox");
  3.   var spanObj = document.getElementById("charsLeft");
  4.   var charsLeft = remaining - textBox.value.length;
  5.   if (charsLeft <= 0) {
  6.     charsLeft = 0;
  7.     textBox.value = textBox.value.substring(0,remaining);
  8.   }
  9.   spanObj.innerHTML = charsLeft + " characters left.";
  10. }
Thanks

Actually I was doing in this way. This code is working but not as I wanted.
Expand|Select|Wrap|Line Numbers
  1. function left()
  2. {
  3.     var maxlen=20;
  4.     var len=document.che.firstname.value.length;
  5.     if(len>maxlen)
  6.     {
  7.         return false;
  8.         exit();
  9.     }
  10.     else
  11.     {
  12.         var str=document.che.firstname.value.length;
  13.         var str=maxlen-str;
  14.         document.write(str+"charaters left");
  15.     }
  16. }
Expand|Select|Wrap|Line Numbers
  1. <form name="che">
  2. <input type="text" value="" name="firstname"  onkeyup="left()" />
So now I came to know where I was wrong.
Feb 4 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Glad it helped fix it.

Don't use document.write after the page has loaded.

Remember to close your code tags with [/code] otherwise the code won't appear as code.
Feb 4 '08 #4

100+
P: 254
Glad it helped fix it.

Don't use document.write after the page has loaded.

Remember to close your code tags with [/code] otherwise the code won't appear as code.
I have three boxes in which I wanted to use this feature so for rest textbox do I need to write the same code or it can be done in one go. if it is then how can I do it.
Feb 4 '08 #5

acoder
Expert Mod 15k+
P: 16,027
I have three boxes in which I wanted to use this feature so for rest textbox do I need to write the same code or it can be done in one go. if it is then how can I do it.
You just need to adapt the code to work with all three. If you add an extra parameter to identify the textbox, it should work fine with all three. Post your HTML code if you get stuck.
Feb 4 '08 #6

100+
P: 254
You just need to adapt the code to work with all three. If you add an extra parameter to identify the textbox, it should work fine with all three. Post your HTML code if you get stuck.
Here is the HTML code.

Expand|Select|Wrap|Line Numbers
  1. //html
  2. <input name="firstname"type="text" id="textBox"  value="" size="20" maxlength="20" /><span id="charsLeft" >20 Characters Left</span>
  3.  
  4. <input name="middlename"type="text" id="textBoxm" value="" size="20" maxlength="20" /><span id="charsLeftm" >20 Characters Left</span>
  5.  
  6. <input name="lastname"type="text" id="textBoxl"  value="" size="20" maxlength="20" /><span id="charsLeftl" >20 Characters Left</span>
  7.  
  8.  
Feb 5 '08 #7

acoder
Expert Mod 15k+
P: 16,027
The only changes you need to make are in the first three lines of the function:
Expand|Select|Wrap|Line Numbers
  1. function charCount(remaining, id) {
  2.   var textBox = document.getElementById("textBox"+id);
  3.   var spanObj = document.getElementById("charsLeft"+id);
and in the HTML:
Expand|Select|Wrap|Line Numbers
  1. <input name="firstname" type="text" id="textBox" value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'')" /><span id="charsLeft" >20 Characters Left</span>
  2.  
  3. <input name="middlename" type="text" id="textBoxm" value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'m')" /><span id="charsLeftm" >20 Characters Left</span>
  4.  
  5. <input name="lastname" type="text" id="textBoxl"  value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'l')" /><span id="charsLeftl" >20 Characters Left</span>
Feb 5 '08 #8

100+
P: 254
The only changes you need to make are in the first three lines of the function:
Expand|Select|Wrap|Line Numbers
  1. function charCount(remaining, id) {
  2.   var textBox = document.getElementById("textBox"+id);
  3.   var spanObj = document.getElementById("charsLeft"+id);
and in the HTML:
Expand|Select|Wrap|Line Numbers
  1. <input name="firstname" type="text" id="textBox" value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'')" /><span id="charsLeft" >20 Characters Left</span>
  2.  
  3. <input name="middlename" type="text" id="textBoxm" value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'m')" /><span id="charsLeftm" >20 Characters Left</span>
  4.  
  5. <input name="lastname" type="text" id="textBoxl"  value="" size="20" maxlength="20" onkeyup="charCount(this.maxLength,'l')" /><span id="charsLeftl" >20 Characters Left</span>
Thanks

It workes fine as I wanted to do.
Feb 5 '08 #9

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Glad to hear that it worked as you wanted.
Feb 5 '08 #10

100+
P: 254
You're welcome. Glad to hear that it worked as you wanted.
Hi
I got one more problem but it is with php and gd library it is header allready sent if you want I will show you my code so please reply me back.
Feb 6 '08 #11

acoder
Expert Mod 15k+
P: 16,027
Since this is not related to this thread, start a new thread in the correct forum (it's a PHP question?) if you haven't already done so.
Feb 6 '08 #12

100+
P: 254
Since this is not related to this thread, start a new thread in the correct forum (it's a PHP question?) if you haven't already done so.

Ok. I have posted it in PHP forum with Title: Cannot modify header information - headers already sent. So please suggest me what to do?

Thanks!
Feb 6 '08 #13

Post your reply

Sign in to post your reply or Sign up for a free account.