Introduction:
Here I will explain how to Show or limit the number of characters length in Multilne textbox and how to remove vertical scrollbar in Multiline textbox using asp.net
Description:
One day I found one interesting thing in one of the sms sending site in that they provide one message textbox that is allowing only 140 characters to send message and they are displaying number characters left in the messagebox to type and if we are typing text in messagebox they are displaying the percentage graph also how much percentage of characters has entered in message textbox out of 140 characters. At that time I decided to write the post based on that here I designed page with one textbox that has a multiline property and one label to display the number of characters left to type in textbox and used tables to display the percentage graphs based on text typed in textbox
First design your aspx page like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Limit the number of characters in multiline textbox</title>
<script type="text/javascript">
//This function is used to display the number of characters left and percentage graph
function CharactersCount() {
var CharLength = '<%=txtMessage.MaxLength %>';
var txtMsg = document.getElementById('txtMessage');
var lblCount = document.getElementById('lblChar');
var colorwidth = txtMsg.value.length;
var divcolor = document.getElementById('Colordiv');
if (txtMsg.value.length > CharLength) {
txtMsg.value = txtMsg.value.substring(0, CharLength);
}
lblCount.innerHTML = CharLength - txtMsg.value.length ;
if (colorwidth >= 1) {
divcolor.width = (colorwidth * 1.05) + "px";
divcolor.bgColor = 'red';
divcolor.height = 6 + "px";
}
else {
divcolor.width = 1 + "px";
divcolor.bgColor = '#9ED40A';
}
}
</script>
<style type="text/css">
.style1
{
width: 65%;
}
.lblstyle
{
background-color:#E2EEF1;
color:Red;
font-weight:bold;
font-size: 14px;
font-family: Tahoma;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td class="style1">
</td>
<td>
<span style=" font-family:Verdana; font-size:12px">Left:</span>
<asp:Label ID="lblChar" runat="server" Text="100" CssClass="lblstyle"></asp:Label>
</td>
</tr>
<tr>
<td class="style1"></td>
<td style="width:105px">
<table cellpadding="0" cellspacing="0" width="100%">
<tr style="background-color:#9ED40A; height:6px">
<td>
<div>
<table cellpadding="0" cellspacing="0">
<tr style="height:6px">
<td id="Colordiv" runat="server">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<asp:TextBox ID="txtMessage" onkeyup="Javascript:CharactersCount();" runat="server" Style="overflow: hidden;" Height="80px" TextMode="MultiLine" Width="300px" MaxLength="100" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
If you observe above code I applied TextMode="MultiLine" property for textbox it give a chance to allow user to enter more text and I applied Style="overflow: hidden;" property for textbox by using this property we can remove vertical scrollbar for multiline textbox. Now if you observe header part I written javascript function to limit the number of characters length in Multiline textbox and displaying percentage graph including number of remaining characters left to type in textbox. In JavaScript I used MaxLength property to get the MaxLength of characters and used substring() function this function is used to extracts the characters from a string, between two specified indices.
Demo
 |
Download sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
9 comments :
How to write the function in the content place holder if I have a webpage which take from master page??
nice post which is very useful suresh...........
Thank you suresh...
Nice post
Thank you..
nice post.develop your blog.all the best.
It gives different result in IE and Mozila
Anna, nuv super . .
fgfgf
gggg gggg
ggg ggg
ggggg ggggg
ggg gggg
------------------------------
enter the text above the ------------------- and add a button to the code
protected void btn1_Click(object sender, EventArgs e)
{
string s = txtMessage.Text.Length.ToString();
}
yow will find that s will be 124 how to resolve it.....
very good
Note: Only a member of this blog may post a comment.