Hello dear,
This operation can easily perform but it became tedious task when you have to do this for gridview controls (textbox) and evvn much tedious when there is
multiple textbox with same ids (in case of multiple rows in gridview). I have aslo faced this situation and after expendign more then 5 hrs I came to solve
this problem. Here is the code. This may help you!
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Remark</title>
<script src="../../../Resources/JSFiles/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var maxlength = 120;
$("[id^=grStudentRemark] input[type=text]").on("keypress", function(e) {
var Len = $(this).val().length;
var remChar = maxlength - Len;
if (remChar > -1) {
$(this).next('span').text(remChar);
}
if (Len > maxlength) {
//e.preventDefault();
$(this).val($(this).val().substring(0, maxlength));
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grStudentRemark" runat="server" AutoGenerateColumns="False" BackColor="White"
Visible="false" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3"
GridLines="Vertical">
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#000000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#DCDCDC" />
<Columns>
<asp:TemplateField HeaderText="Remark">
<ItemTemplate>
<asp:TextBox ID="txtMultipleRemark1"
MaxLength="200" runat="server" Width="350px" Style="margin-bottom: 1px;" /><asp:Label
ID="r1" runat="server" Style="background-color: #E2EEF1; color: Red; font-weight: normal;">120</asp:Label><br />
<asp:TextBox ID="txtMultipleRemark2"
MaxLength="200" runat="server" Width="350px" Style="margin-bottom: 1px;" /><asp:Label
ID="r2" runat="server" Style="background-color: #E2EEF1; color: Red; font-weight: normal;">120</asp:Label><br />
<asp:TextBox ID="txtMultipleRemark3"
MaxLength="200" runat="server" Width="350px" Style="margin-bottom: 1px;" /><asp:Label
ID="r3" runat="server" Style="background-color: #E2EEF1; color: Red; font-weight: normal;">120</asp:Label><br />
<asp:TextBox ID="txtMultipleRemark4"
MaxLength="200" runat="server" Width="350px" Style="margin-bottom: 1px;" /><asp:Label
ID="r4" runat="server" Style="background-color: #E2EEF1; color: Red; font-weight: normal;">120</asp:Label><br />
<asp:TextBox ID="txtMultipleRemark5"
MaxLength="200" runat="server" Width="350px" Style="margin-bottom: 1px;" /><asp:Label
ID="r5" runat="server" Style="background-color: #E2EEF1; color: Red; font-weight: normal;">120</asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Cheers!!!