这是一个仿校内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输入框字数限制效果的更多相关文章

  1. textarea限定字数提示效果

    最近工作中要实现的一个效果是:在textarea中输入字符会提示剩余多少字符可输入.于是马不停蹄的开始查阅资料. HTML代码: <table> <colgroup> < ...

  2. textarea输入框限制字数（JS）

    第一种: <textarea onkeyup="checkLen(this)"></textarea> <div>您还可以输入 <span ...

  3. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  4. textarea 输入框限制字数

    在textarea标签中,只需要设置maxlength=”***”即可,但是在textarea标签中,IE9及IE9以下浏览器是不支持的,IE10.IE11则支持,估计后续的版本应该都会支持. 现在来 ...

  5. jquery完美实现textarea输入框限制字数

    <html> <head> <title> jquery完美实现textarea输入框限制字数</title> <meta http-equiv= ...

  6. JavaScript 实现textarea限制输入字数， 输入框字数实时统计更新，输入框实时字数计算移动端bug解决

    textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...

  7. jquery插件——仿新浪微博限制输入字数的textarea

    内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...

  8. JS 仿腾讯发表微博的效果

    JS 仿腾讯发表微博的效果 最近2天研究了下 腾讯发表微博的效果 特此来分享下,效果如下: 在此分享前 来谈谈本人编写代码的习惯,很多人会问我既然用的是jquery框架 为什么写的组件不用Jquery ...

  9. JavaScript监控输入框字数变化，超出限制则禁止输入

    JavaScript监控输入框字数变化,超出则禁止输入 不废话,给你看看效果: 1.无输入状态: 2.输入三个字符: 3.超出5个后报错: 现在粘出代码,首先是html代码: <body> ...

随机推荐

  1. 测试Beetle.Redis+Web Api

    在Web Api里用Beetle.Redis调用Redis服务端的TIME命令返回一个json格式,然后客户端是用的HttpTest4Net做的测试: CPU:I7-3770 内存:4G+4G 硬盘: ...

  2. 转：pthread_create()

    http://blog.csdn.net/youbang321/article/details/7815707 原型:int  pthread_create((pthread_t  *thread,  ...

  3. Pig Apache Hadoop

    http://blog.cloudera.com/blog/2009/06/analyzing-apache-logs-with-pig/

  4. C 語言中的編譯指示 (Pragma)

    編譯指示 #pragma 是用來告知編譯器某些特殊指示,例如不要輸出錯誤訊息,抑制警告訊息,或者加上記憶體漏洞檢查機制等.這些指示通常不是標準的 C 語言所具備的,而是各家編譯器廠商或開發者所制定的, ...

  5. activity5 流程 入门

    http://blog.csdn.net/yangyi22/article/details/9225849 谢谢原文作者提供!

  6. [面试题总结及扩展知识]HTTP协议返回状态码的问题

    经常在网页中看到一些错误的返回信息,见一个查一个已经累感不爱,在2014年腾讯笔试题中也见到一道这样的问题,所以现在来总结一下: 腾讯2014面试题: 答案选B 附带一些http协议的错误代码: 当服 ...

  7. hdu2444The Accomodation of Students

    思路: 二分图判断+最大匹配模板 二分图判断的方法很好想,没有离散的基础凭空给你个图让你判断也很容易想到染色法,简单的介绍下就是用queue来做,标记一个点为x则他所有的邻点都为x',然后递归的执行下 ...

  8. HDU-1241Oil Deposits

    Description GeoSurvComp地质调查公司负责探测地下石油储藏. GeoSurvComp现在在一块矩形区域探测石油,并把这个大区域分成了很多小块.他们通过专业设备,来分析每个小块中是否 ...

  9. Onlylady介绍

    Onlylady介绍 Onlylady介绍

  10. Findbugs初探-使用idea获取findbugs插件

    /* * 整天忙于无限重复的黑盒测试,不论是写脚本,还是手工测,都难以脱离黑&&灰盒测试,所以忽然间想,大学时期学过的所有课程就这样扔掉吗?不好!既然选择了做测试,那么就要一直坚持下去 ...