Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Limit number characters in asp.net multiline textbox using JavaScript

Apr 13, 2011

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 RSS subscribe by email Subscribe by Email

9 comments :

Anonymous said...

How to write the function in the content place holder if I have a webpage which take from master page??

crazy kittu said...

nice post which is very useful suresh...........

Unknown said...

Thank you suresh...

Unknown said...

Nice post
Thank you..

nanthini said...

nice post.develop your blog.all the best.

Anonymous said...

It gives different result in IE and Mozila

Anonymous said...

Anna, nuv super . .

Anonymous said...

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.....

Unknown said...

very good

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.