IntroductionToday I have introduced the new features for CodeGain article submit page to count characters for description textbox with JQuery in on time. The character counter is support to users to display how many characters they have entered and how many chars remaining. So I would like to share this with you. Note: I have not use any external plug-ins for this implementation. ImplementationStep 1 As usual create web application using visual studio with one web page. Step 2 Design page with one textbox and a div for display character count as message. The web Page looks like as below, HTML Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CharCounter.aspx.cs" Inherits="CharCounter" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>OnTime Character Counter for TextBox Control using JQuery in ASP.NET</title>
</head>
<body>
<form id="form1" runat="server">
<div id="main" style="display: block;">
<dvi>Welcome to Online character counter.</dvi>
<div id="result">
</div>
<div>
<asp:TextBox ID="txtMessage" TextMode="MultiLine" MaxLength="300" Width="400px" Height="100px"
runat="server"></asp:TextBox>
</div>
</div>
</form>
</body>
</html>
Step 3 And also create simple style sheet for make look and feel is good. CSS <style type="text/css">
#main
{
display: block;
}
#result
{
font: normal normal bold 10px verdana;
}
</style>Step 4 In order work with JQuery, you have to add JQuery Library from your local folder or from Google CDN. I always prefer use from Google CSN. <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> Step 5 Now start to write JavaScript code for count chars and display in div control as message for users.
JavaScript Code <script language="javascript" type="text/javascript">
$(document).ready(function() {
// declare default character count
var maxchar = 300;
// set initial remaining character is acceptable by text box.
$('#result').html("Remaining chars :" + maxchar);
// invoke key up event for txtMessage Control
$('#txtMessage').keyup(function() {
// get each time length and display in div
var txtmessage = $('#txtMessage').val();
var remain = maxchar - txtmessage.length;
if (remain >= 0) {
$('#result').html("Remaining chars :" + remain);
}
else {
$('#result').html("Remaining chars :0");
$('#txtMessage').val(txtmessage.substring(0, maxchar));
}
});
});
</script>Code Explanation1. Declare Initial character count is 300
2. And then set default acceptable chars to message textbox.
3. The third line is important for invoke the KeyUp event for TextBox control in order to access chars length and etc $('#txtMessage').keyup(function() {
});4. In the next line get entered characters and then in next line subtract from maximum acceptable count var txtmessage = $('#txtMessage').val();
var remain = maxchar - txtmessage.length;5. In the next line check if remaining count is great than zero then set result how many remains count to div. if (remain >= 0)
{
$('#result').html("Remaining chars :" + remain);
}6. Otherwise set it remains is chars count is 0 and substring what is maximum characters is entered $('#result').html("Remaining chars :0");
$('#txtMessage').val(txtmessage.substring(0, maxchar));Note: In your project you may need to other action if users entered maximum characters. Then you have to change else block logic as like you wanted. Step 6 The code is ready now run application and enter words and see. Output as like below.
Output Note: for the Live demonstration I have set maximum acceptable count is 10
I have given live demonstration, try this features in on live below, Live DemoOn Time Character Counter Download Sample ProjectDownload source files -3 kb ConclusionIn this article you have learned how to count characters on time in text box using JQuery in ASP.NET. This is most useful when you are allow users to enter comments for your articles. Thank for reading. |