仿校内textarea输入框字数限制效果

这是一个仿校内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>
posted @ 2014-07-17 18:16  壁虎漫步.  阅读(275)  评论(0)  编辑  收藏  举报