方法一：
jQuery引进方法，直接调用就可以
jQuery代码：limit.js
//txt:文本框jquery对象
//limit:限制的字数
//isbyte:true:视limit为字节数；false:视limit为字符数
//cb：回调函数，参数为可输入的字数
function InitLimit(txt,limit,isbyte,cb){
txt.keyup(function(){
var str=txt.val();
var charLen;
var byteLen=0;
if(isbyte){
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)>255){
byteLen+=2;
}else{
byteLen++;
}
}
charLen = Math.floor((limit-byteLen)/2);
}else{
byteLen=str.length;
charLen=limit-byteLen;
}
cb(charLen);
});
}
js调用：
<script type="text/javascript" charset="utf-8" src="limit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//字数统计
InitLimit($("#inputtext1"),36,true,function(c){
if(c>=0){
$("#inputtext1").parent().next().children().html(c); //也可以直接定义 0 的类名，不过这样的话，如果有很多统计字数的，要定义很多类比较麻烦
}else{
alert("最多可输入18个字");
}
});
})
</script>
html代码：
<span class="news-inputbox"><input type="text" placeholder="请输入文本" id="inputtext1" maxLength="18"/></span><span class="wordnum-limit"><span>0</span>/18</span>
方法二：
js方法：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $tex = $(".tex");
var $but = $(".but");
var ie = jQuery.support.htmlSerialize;
var str = 0;
var abcnum = 0;
var maxNum = 280;
var texts= 0;
var num = 0;
var sets = null;
$tex.val("");
//顶部的提示文字
$tex.focus(function(){
if($tex.val()==""){
$("p").html("您还可以输入的字数<span>140</span>");
}
})
$tex.blur(function(){
if($tex.val() == ""){
$("p").html("请在下面输入您的文字：");
}
})
//文本框字数计算和提示改变
if(ie){
$tex[0].oninput = changeNum;
}else{
$tex[0].onpropertychange = changeNum;
}
function changeNum(){
//汉字的个数
str = ($tex.val().replace(/w/g,"")).length;
//非汉字的个数
abcnum = $tex.val().length-str;
total = str*2+abcnum;
if(str*2+abcnum<maxNum || str*2+abcnum == maxNum){
$but.removeClass()
$but.addClass("but");
texts =Math.ceil((maxNum - (str*2+abcnum))/2);
$("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"});
}else if(str*2+abcnum>maxNum){
$but.removeClass("")
$but.addClass("grey");
texts =Math.ceil(((str*2+abcnum)-maxNum)/2);
$("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"});
}
}
//按钮点击
$but.click(function(){
if($(this).is(".grey")){
sets = setInterval(flash,100);
$tex.addClass("textColor");
}
function flash(){
num++;
console.log(num);
if(num >= 5){
num=0;
clearInterval(sets);
}else if(num%2 == 1){
$tex.addClass("textColor")
}else{
$tex.removeClass("textColor")
}
}
})
})
</script>
<style type="text/css">
.box{
500px;
margin:10px auto;}
*{
margin:0;
padding:0;
}
p span{
color:#069;
font-weight:bold;
}
textarea{
300px;
}
.textColor{
background-color:#0C9;
}
.but{
background-color:#066;
padding:5px;
color:#FFF;
border:1px solid #999;}
.grey{
padding:5px;
color:#FFF;
background-color:#CCCCCC;}
</style>
</head>
<body>
<div class="box">
<p>请在下面输入您的文字：</p>
<textarea name="weibao" class="tex" cols="" rows="8"></textarea>
<input type="button" class="but" value="确定" />
</div>
</body>
</html>