Sometimes it becomes a necessity to limit the number of characters in a textbox and to see the number of characters typed in the Textbox. For that we can use JavaScript to perform this task easily.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CharacterLimit_JS.aspx.cs" Inherits="CharacterLimit_JS" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Limit Number of Characters using JavaScript</title>
<script type="text/javascript">
//This
function is used to display the number of characters left and percentage graph
function CharCnt() {
var CharLength = '<%=txtCharacters.MaxLength %>';
var txtMsg = document.getElementById('txtCharacters');
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>
<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="txtCharacters" onkeyup="Javascript:CharCnt();"
runat="server" Style="overflow: hidden;" Height="80px" TextMode="MultiLine" Width="300px"
MaxLength="100" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
No comments:
Post a Comment