首页 > 代码库 > 仿校内textarea输入框字数限制效果

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

2024-07-12 14:58:54   222人阅读

这是一个仿校内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>


联系
我们