How to count character of TextBox in ASP.NET
Here, we will see how to check number of
character has been inserted in the TextBox. A TextBox Which has max length 120
character and we insert a character in TextBox max length will be display 119
characters. When We enter 120 characters in the TextBox that will be the Max
length.
Drag and drop a TextBox on the page. Select
TextBox and press F4 to property window.
TextMode="MultiLine"
Now add the following code in the Head section
of the .aspx page.
<head runat="server">
<title></title>
<style type="text/css">
.valid
{
background-color:
#FFFFFF;
color:
#000000;
}
.invalid
{
background-color:
#FFCCCC;
color:
#ff0000;
}
</style>
<script language="javascript">
function textCounter1(field, maxlimit)
{
if (field.value.length > maxlimit) {
field.value = field.value.substring(0, maxlimit);
document.getElementById('message').className
= "invalid";
document.getElementById('message').focus();
//alert('You have reached your maximum
character limit.');
}
else {
document.getElementById('message').className
= "valid";
}
}
function textCounter(field,
countfield, maxlimit) {
if (field.value.length > maxlimit)
// if too long...trim it!
field.value = field.value.substring(0, maxlimit);
else
countfield.value = maxlimit - field.value.length;
}
</script>
</head>
Now add the following code in the body section.
<body bgcolor="#FFFFFF">
<form name="blah" action="" method="post" runat="server">
<asp:TextBox ID="message" runat="server" name="message" onkeydown="textCounter(this.form.message,this.form.remLen,120)"
onkeyup="textCounter1(this.form.message,
120)" class="validentry"
Height="101px" TextMode="MultiLine" Width="228px"></asp:TextBox>
<br />
<input readonly type="text" name="remLen" size="3" maxlength="3" value="120"
position: absolute;
style="width:
34px">Character left<br />
<br />
<br />
</form>
</body>
Now run the application and check number of character has been inserted in the
TextBox.
Figure1
Now Insert max length characters in TextBox.
Figure2
<head runat="server">
<title></title>
<style type="text/css">
.valid
{
background-color:
#FFFFFF;
color:
#000000;
}
.invalid
{
background-color:
#FFCCCC;
color:
#ff0000;
}
</style>
<script language="javascript">
function textCounter1(field, maxlimit)
{
if (field.value.length > maxlimit) {
field.value = field.value.substring(0, maxlimit);
document.getElementById('message').className
= "invalid";
document.getElementById('message').focus();
//alert('You have reached your maximum
character limit.');
}
else {
document.getElementById('message').className
= "valid";
}
}
function textCounter(field,
countfield, maxlimit) {
if (field.value.length > maxlimit)
// if too long...trim it!
field.value = field.value.substring(0, maxlimit);
else
countfield.value = maxlimit - field.value.length;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="blah" action="" method="post" runat="server">
<asp:TextBox ID="message" runat="server" name="message" onkeydown="textCounter(this.form.message,this.form.remLen,120)"
onkeyup="textCounter1(this.form.message,
120)" class="validentry"
Height="101px" TextMode="MultiLine" Width="228px"></asp:TextBox>
<br />
<input readonly type="text" name="remLen" size="3" maxlength="3" value="120"
position: absolute;
style="width:
34px">Character left<br />
<br />
<br />
</form>
</body>
No comments:
Post a Comment