这是一个仿校内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>
仿校内textarea输入框字数限制效果,布布扣,bubuko.com
时间： 2024-08-09 06:35:03