这是一个仿校内textarea回复消息输入框限制字数的效果，具体表现如下：
普通状态是一个输入框，当光标获取焦点时，出现字数记录和回复按钮
PS:上边那个小三角可不是用的图片。
普通状态效果如下：
获取焦点时：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="author" content="Web Layout:LiQiang.Gu;" /> <meta name="description" content="前端思考 web前端 前端制作 artskin www.artcss.com" /> <meta name="Keywords" content="前端思考 web前端 前端制作 artskin www.artcss.com" /> <title>textarea的字数限制javascript代码</title> <script type="text/javascript" src="http://www.artcss.com/js/jq_1.4.js"></script> <style type="text/css"> <!-- *{margin:0;padding:0;font-family:Microsoft YaHei,calibri,verdan;} body{padding:10px;} .layout{float:left;} b{display:block;border-color:#fff #fff #ebf3f7;border-style:solid;border-width:8px;font-size:0;height:0;line-height:0;width:0;margin-left:10px;} .box{background:#ebf3f7;padding:6px;} .input-button{background:#005EAC;border-color:#B8D4E8 #124680 #124680 #B8D4E8;border-style:solid;border-width:1px;color:#fff;cursor:pointer; font-size:12px;width:60px;padding:2px 15px;text-align:center;line-height:16px;} textarea{width:418px;height:22px;border:1px solid #bdc7d8;background:#fff;line-height:20px;padding:0 2px;font-size:14px;word-wrap:break-word;} .focus{border:1px solid #5D74A2;height:38px;overflow:hidden;overflow-y:auto;} p{display:none;padding-top:3px;} p input{float:left;} p span{color:#ccc;font-size:12px;line-height:25px;padding-left:5px;} --> </style> <script type="text/javascript"> $(function(){ function maxLimit(){ var num=$(this).val().substr(0,140); $(this).val(num); $(this).next().children("span").text($(this).val().length+"/140"); }; $("#textlimit").keyup(maxLimit); $("#textlimit").focus(function(){ $(this).addClass("focus").next().show(); if($(this).val() == $(this).attr("title")){ $(this).val(""); } }); $("#textlimit").blur(function(){ if($(this).val().length > 0){ $(this).addClass("focus").next().show(); }else{ $(this).removeClass("focus").next().hide(); } if($(this).val() == ""){ $(this).val($(this).attr("title")); } }); }); </script> </head> <body> <div class="layout"> <b></b> <div class="box"> <textarea name="textarea" id="textlimit" cols="45" rows="1" title="添加回复">添加回复</textarea> <p> <input class="input-button" type="button" value="回复" /> <span class="textCount">0/140</span> </p> </div> </div> </body> </html>