Text Box Characters Counter (IE, Opera, FireFox, & Safari)

In forms when using text boxes or text areas with limited character length (usually needed for forms that submit data to a database) it is always a good idea to tell the user how many characters they have remaining. This javascript snippet is especially useful for textarea fields since they can't be assigned a text limit in HTML but can be restricted using this code.

The following example shows how you can do this. This is a very simple and cute idea to help the user know exactly how many characters can be typed further. Do these small add-ons to your forms and they will look really professional. We recommend using this counter inside CMS solutions and custom built Admin Panels where your clients/visitors can be instructed to use all browsers like IE, Opera, FireFox, Netscape or Safari.

JavaScript to be pasted in head tags

<script language = "Javascript">
/**
* DHTML textbox character counter script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/)
*/

maxL=255;
var bName = navigator.appName;
function taLimit(taObj) {
if (taObj.value.length==maxL) return false;
return true;
}

function taCount(taObj,Cnt) {
objCnt=createObject(Cnt);
objVal=taObj.value;
if (objVal.length>maxL) objVal=objVal.substring(0,maxL);
if (objCnt) {
if(bName == "Netscape"){
objCnt.textContent=maxL-objVal.length;}
else{objCnt.innerText=maxL-objVal.length;}
}
return true;
}
function createObject(objId) {
if (document.getElementById) return document.getElementById(objId);
else if (document.layers) return eval("document." + objId);
else if (document.all) return eval("document.all." + objId);
else return eval("document." + objId);
}
</script>

html code to be pasted within body tags

<font> Maximum Number of characters for this text box is 255.<br>
<textarea onKeyPress="return taLimit(this)" onKeyUp="return taCount(this,'myCounter')" name="Description" rows=7 wrap="physical" cols=40>
</textarea>
<br><br>
You have <B><SPAN id=myCounter>255</SPAN></B> characters remaining
for your description...</font>

Creating a login script with ASP

login.asp

<%
Response.Expires = -1000 'Makes the browser not cache this page
Response.Buffer = True 'Buffers the content so our Response.Redirect will work
Session("UserLoggedIn") = ""
If Request.Form("login") = "true" Then
CheckLogin
Else
ShowLogin
End If

Sub ShowLogin
%>

<form name=form1 action=login.asp method=post>
User Name : <input type=text name=username><br>
Password : <input type=password name=userpwd><br>
<input type=hidden name=login value=true>
<input type=submit value="Login">
</form>
>%
End Sub

Sub CheckLogin
If LCase(Request.Form("username")) = "guest" And LCase(Request.Form("userpwd")) = "guest" Then
Session("UserLoggedIn") = "true"
Response.Redirect "protectedpage.asp"
Else
Response.Write("Login Failed.<br><br>")
ShowLogin
End If
End Sub
%>

Protectedpage.asp
<%
Response.Expires = -1000 'Makes the browser not cache this page
Response.Buffer = True 'Buffers the content so our Response.Redirect will work

If Session("UserLoggedIn") "true" Then
Response.Redirect("login.asp")
End If
%>

This page is full of password protected content. If you are reading this you entered

the correct name and password.


read more