这是一个仿校内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. memcpy造成其他变量值改变

        以前C/C++遇到过很多很多的问题,有时候费了很久很久时间,很大很大的努力才解决.但是都没有记录下来,现在想想以前的遇到的问题,只知道这样的事情发生过,至于是什么问题,一点印象都没有了.所以遇 ...

  2. Vector3.Dot 与Vector3.Cross

    Vector3.Dot(点积) : 点积的计算方式为:  a·b=|a|·|b|cos<a,b>; 其中<a,b>和<b,a> 夹角不分顺序; 物理学中点积用来计算 ...

  3. 被墙的情况（同时下载AndroidSDK达到200+kb/s）

    相信大家都遇到过google搜索被墙掉的情况吧:现在用修改Hosts的方法来解决哈 linux下: sudo gedit /etc/hosts win7下: 到目录C:\Windows\System3 ...

  4. ural 1126 Magnetic Storms

    http://acm.timus.ru/problem.aspx?space=1&num=1126 #include <cstdio> #include <cstring&g ...

  5. MCS51浮点计算程序

    MSC-51 3字节和4字节浮点数计算程序,主要用于数据采集及上传,经过IEEE转换,在上位机直接显示. ;这是本人使用的MSC-51 3字节和4字节浮点数计算程序,主要用于数据采集及上传,经过IEE ...

  6. myEclipse异常解决:Errors occurred during the build. Errors running builder Mule 3 hot deployment

    选择一个项目—-右键Properties—-Builders—-取消 “JavaScript Validator”  和 Mule 3 hot deployment 的勾就OK了 根据具体异常,勾选. ...

  7. DLL模块例1：使用.def模块导出函数，规范修饰名称，显示连接调用dll中函数

    以下内容,我看了多篇文章,整合在一起,写的一个例子,关于dll工程的创建,请参考博客里另一篇文章:http://www.cnblogs.com/pingge/articles/3153571.html ...

  8. HDU5266---pog loves szh III （线段树+LCA）

    题意:N个点的有向树, Q次询问, 每次询问区间[L, R]内所有点的LCA. 大致做法:线段树每个点保存它的孩子的LCA值, 对于每一次询问只需要 在线段树查询即可. #include <bi ...

  9. Apache Ant在Windows下配置环境变量

    Windows下ANT用到的环境变量主要有2个: ANT_HOME 和 PATH. 1..设置ANT_HOME指向ant的安装目录,如下: ANT_HOME = D:\soft\apache\apac ...

  10. 设置UIScrollView只可以水平或者竖直滚动

    UIScrollView里边包含多个UIWebView: 可以通过设置contentSize的值,设置其width为UIScrollerView可视区域的宽度:即UIScrollView的width, ...