在网页中，为例提高用户体验，往往会在用户使用文本框时提示文本框最大限定字数以及当用户输入后，提示还可以输入的字符数，这里用到了另外一个插件charCount.js来实现该功能。
以下参考程序实现的功能有
1、限制文本框里面的字符数，当超过规定的字符数时不能再继续输入，用户在输入过程中会提示还可以输入的字符数
2、文本框内会出现默认灰色的提示文本，当文本框获得焦点时，比如用鼠标点击该文本框，提示文本会自动影藏，当文本框离开焦点时又会恢复默认的提示文本。
参考代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript"
src="${pageContext.request.contextPath}/script/jquery.js"></script>
<script language="javascript"
src="${pageContext.request.contextPath}/script/jquery.charcount.js"></script>
<script>
$(document).ready(function() {
$("#test1").focus(function(){//元素获得焦点猝发事件
if($("#test1").val()==this.title)
{
$("#test1").val("");
}
});
$("#test1").blur(function(){//失去焦点的猝发事件
if($("#test1").val()=="")
{
$("#test1").val(this.title);
}
});
$("#test1").charcount({//限制文本框输入字数
maxLength: 50,
preventOverage: true
});
});
</script>
<style>
input {
width: 30%;
margin: 0;
display: block;
}
.charcount-display {
display: block;
margin: 0 0 3px 0;
color: #c00;
}
.charcount-position-after {
margin: 3px 0 0 0;
}
.charcount-overage {
color: #c00;
}
</style>
</head>
<body>
<div id="page-wrapper">
<div class="demo">
<h2>请输入内容</h2>
<input type="text" id="test1" class="countable" value="搜索...."
title="搜索...." />
</div>
</div>
</body>
</html>
?附：charCount.js文件
原文：http://673390302.iteye.com/blog/2301931