July 14, 2011 05:27 by
ScottHere, we'll see how to implement a Twitter like multiline asp:TextBox character counter that counts how many characters are entered in the asp:TextBox using simple javascript. We'll also restrict user to post (submit) Text, if the entered character count is greater than Max. allowed characters by disabling the Button.
Let's start by creating a new ASP.Net website named 'TwitterLikeTextCounter', say. In the 'Default.aspx', insert three controls i.e. a multiline asp:TextBox (used to enter character input), a readonly asp:TextBox (used to show the character count) and a button. As we want to impose some Max. allowed characters restriction on the Multiline asp:TextBox, if the character count in asp:TextBox exceeds the maximum allowed characters then the submit button is disabled and the character counter CSS is also changed. Add the below code in head section of page:
<script language="javascript" type="text/javascript">
function GetButtonTwitterLikeCounter() {
return document.getElementById('<%= btnTwitterLikeCounter.ClientID %>');
}
function GetTextBoxCharacterCounter() {
return document.getElementById('<%= TextBoxCharacterCounter.ClientID %>');
}
function SetTextBoxCharacterCounter(src) {
txtCount = GetTextBoxCharacterCounter();
txtCount.value = 100 - src.value.length;
}
function checkLength(src, len) {
txtCount = GetTextBoxCharacterCounter();
txtCount.value = len - src.value.length;
try {
if (src.value.length > (len)) {
if (txtCount.value < 0) {
txtCount.className = "WarningTwitterLikeCounter";
GetButtonTwitterLikeCounter().disabled = true;
}
return false;
}
} catch (e) { }
txtCount.className = "NormalTwitterLikeCounter";
GetButtonTwitterLikeCounter().disabled = false;
}
</script>
The page markup code would be as below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<title>ASP.Net & Javascript: Twitter like Multiline TextBox Counter</title>
<style type="text/css">
.NormalTwitterLikeCounter
{
border-color: White;
border-style: none;
font-family: Arial;
color: #FF9900;
background-color: #FFFFFF;
}
.WarningTwitterLikeCounter
{
border-color: White;
border-style: none;
font-family: Arial;
color: Red;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TwitterLikeTextBox" runat="server" Columns="20" Rows="5" TextMode="MultiLine" onblur="SetTextBoxCharacterCounter(this)" onkeyup="return checkLength(this,100)">
</asp:TextBox>
<asp:TextBox ID="TextBoxCharacterCounter" runat="server" ReadOnly="True" Width="35px" CssClass="NormalTwitterLikeCounter">100
</asp:TextBox>
<asp:Button ID="btnTwitterLikeCounter" runat="server" Text="Twitter Like TextBox Character Counter" />
</form>
</body>
</body>
The code for the 'ASP.Net & Javascript: Twitter like Multiline TextBox Counter' is pretty self explainatory and ofcourse you can modify the code for 'ASP.Net & Javascript: Twitter like Multiline TextBox Counter' according to your needs.
That's all, I hope you have got an idea of how to make a Twitter like Multiline TextBox Counter using Asp.Net & Javascript.