Counting Characters Realtime in ASP.NET TextBox Using JavaScript
ASPX file
<%@ 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></title>
<script type="text/javascript">
function countCharacters() {
var count = parseInt(document.getElementById('<%=TextBox1.ClientID%>').value.length);
document.getElementById('<%=Label1.ClientID%>').innerHTML = 100 - count;
}
</script>
<style type="text/css">
.style1
{
color: #FF0000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
Max 100 characters<br />
<span class="style1">Characters left:</span>
<asp:Label ID="Label1" runat="server"></asp:Label>
</form>
</body>
</html>
ASPX.CS file
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Attributes.Add("onKeyUp", "countCharacters()");
}
Counting textbox length with JavaScript
<%@ 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></title>
<script type="text/javascript">
function countCharacters() {
var count = document.getElementById('<%=TextBox1.ClientID%>').value.length;
alert(count);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return countCharacters();"/>
</form>
</body>
</html>
Related post:
Change TextBox Background Color onFocus using JavaScript and CSS
ASPX File
<%@ 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 runat="server">
<title></title>
<style type="text/css" >
.DefaultStyle {
background-color: Gray;
}
.FocusStyle {
background-color: Yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" CssClass="DefaultStyle"></asp:TextBox>
</form>
</body>
</html>
ASPX.CS File
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Attributes.Add("onfocus", "this.className='FocusStyle'");
TextBox1.Attributes.Add("onblur", "this.className='DefaultStyle'");
}
Javascript function to get TextBox value
<script type="text/javascript">
function GetTextBoxValue() {
var value = document.getElementById('<%=TextBox1.ClientID%>').value;
alert(value);
return false;
}
</script>
Complete Source Code
<%@ 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 runat="server">
<title></title>
<script type="text/javascript">
function GetTextBoxValue() {
var value = document.getElementById('<%=TextBox1.ClientID%>').value;
alert(value);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return GetTextBoxValue();" />
</form>
</body>
</html>
Javascript function for setting TextBox value
<script type="text/javascript">
function SetTextBoxValue() {
document.getElementById("TextBox1").value = "www.dotneter.com";
return false;
}
</script>
Complete Source Code
<%@ 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 runat="server">
<title></title>
<script type="text/javascript">
function SetTextBoxValue() {
document.getElementById("TextBox1").value = "www.dotneter.com";
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return SetTextBoxValue();" />
</form>
</body>
</html>