Introduction:
Here
I will explain how to 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
No comments:
Post a Comment