character limit in textbox

manared

Well-known member
Joined
Jun 1, 2006
Messages
84
Programming Experience
1-3
I am using VB.net 2005 and I have a multiline textbox that I want to limit the number of characters typed in at 130. I also want to have a separate label or textbox that allows the user to view how many characters they have left before they reach the limit. So if they type 10 characters, I want the number to show that they have 120 characters remaining. How do I create this counter and show the users how many characters are left?

I have seen many examples for html using javascript, but how do I do it using VB.net, and asp? Thank you!
 
As long as ASP.NET is server side code you cannot accomplish it in the same manner/way as JS does. Well you can but it is very odd if you ask server every time when user has entered single character in the TextBox. That's why you need client side code (javascript) and that's why you couldnt find any ASP.NET example there.
Regards ;)
 
Add the Textbox (which is an Input tag) and a Label to the page.
In page load add attributes for maxlength and onkeypress event handler:
VB.NET:
[SIZE=2][COLOR=#0000ff]Protected [/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Sub[/COLOR][/SIZE][SIZE=2] Page_Load([/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] sender [/SIZE][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Object[/COLOR][/SIZE][SIZE=2], [/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] e [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] System.EventArgs) _
[/SIZE][SIZE=2][COLOR=#0000ff]Handles [/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Me[/COLOR][/SIZE][SIZE=2].Load
[/SIZE][SIZE=2]TextBox1.Attributes.Add([/SIZE][SIZE=2][COLOR=#800000]"onkeypress"[/COLOR][/SIZE][SIZE=2], [/SIZE][SIZE=2][COLOR=#800000]"countdisplay();"[/COLOR][/SIZE][SIZE=2])
TextBox1.Attributes.Add([/SIZE][SIZE=2][COLOR=#800000]"maxlength"[/COLOR][/SIZE][SIZE=2], [/SIZE][SIZE=2][COLOR=#800000]"130"[/COLOR][/SIZE][SIZE=2])
[/SIZE][SIZE=2][COLOR=#0000ff]End [/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Sub
[/COLOR][/SIZE]
Add a Script tag with the countdisplay() Javascript function:
HTML:
<script type="text/javascript">
function countdisplay() {
var lbl = document.getElementById("Label1");
var tb = document.getElementById("TextBox1");
lbl.innerText = tb.getAttribute("maxlength") - tb.value.length - 1 + " chars left";
}
</script>
 
Thanks!!! That works!! Now I just have to figure out how to make the textbox not allow any typing after the max length has been reached.
 
maxlength property already took care of that.
 
maxlength does not work because it is a multiline textbox. I have it in there just in case, but it still does not keep the user from typing more than 130 characters. Is there some other javascript coding that I can use for this feature for a multiline textbox?
 
I see, I only tried it single line. Use this modified script instead, and change the event from onkeypress to onkeyup.
HTML:
<script type="text/javascript">
function countdisplay() {
var lbl = document.getElementById("Label1");
var tb = document.getElementById("TextBox1");
var max = tb.getAttribute("maxlength");
if (tb.value.length > max) { tb.value = tb.value.substring(0, max); }
else { lbl.innerText = max - tb.value.length + " chars left"; }
}
</script>
 
Alright, so I got the code to work for the most part. The counter is working when the keys are pressed and it does not allow any keys typed after the 100 character maxlength. Right now I am trying to figure out how to make the counter add one to how many characters are remaining when the backspace key is pressed. Any ideas? I also am wondering if there is a way to figure out when someone pastes something in the textbox, if the counter can count how many characters are pasted and then either not allow the paste if there are too many characters, or refresh how many characters are left after the paste? Here is my javascript code:

HTML:
function textCounter(field, countfield, maxlimit) {
 
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else 
countfield.innerText = maxlimit - field.value.length + " characters remaining";
} 
 
function doPaste(control) {
maxLength = control.attributes["maxLength"].value;
value = control.value;
if(maxLength){
event.returnValue = false;
maxLength = parseInt(maxLength);
var oTR = control.document.selection.createRange();
var iInsertLength = maxLength - value.length + oTR.text.length;
var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
oTR.text = sData;
}
}

Here's my vb code:
VB.NET:
[SIZE=2][COLOR=#0000ff]Protected [/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Sub[/COLOR][/SIZE][SIZE=2] Page_Load([/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] sender [/SIZE][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Object[/COLOR][/SIZE][SIZE=2], [/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] e [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] System.EventArgs) [/SIZE][SIZE=2][COLOR=#0000ff]Handles [/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Me[/COLOR][/SIZE][SIZE=2].Load
txtMessage.Attributes.Add([/SIZE][SIZE=2][COLOR=#800000]"onkeypress"[/COLOR][/SIZE][SIZE=2], [/SIZE][SIZE=2][COLOR=#800000]"textCounter(txtMessage, lblCharacters, 99);"[/COLOR][/SIZE][SIZE=2])
txtMessage.Attributes.Add([/SIZE][SIZE=2][COLOR=#800000]"onpaste"[/COLOR][/SIZE][SIZE=2], [/SIZE][SIZE=2][COLOR=#800000]"doPaste(txtMessage);"[/COLOR][/SIZE][SIZE=2])
[/SIZE][SIZE=2][COLOR=#0000ff]End [/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Sub
[/COLOR][/SIZE]
Right now, I'm using a validator for the past. If it is over 100 characters, make them change it. But I would like to do that automatically in the function. Is this possible?
 
Last edited by a moderator:
JohnH said:
change the event from onkeypress to onkeyup.
Do that and it will trigger count on Backspace key and Paste-in by keyboard too.
 
Hi,

Could you please let me know how do i use your code when i have a master page in my applciation. i ran into a problem where the text box counting worked when i was using a simple page. but, once i added a master page to it, it did not function. Well, i am using visual studio 2005.

thansk in advance.
 
Back
Top