这是一个仿校内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. Google Chrome快捷键大全

    信很多朋友在使用过Google Chrome之后,就会不想回到原先使用的浏览器了,尤其是IE.没错Google Chrome的优点很多,已经获得了一大部分网友们的用户,软件志现在也是Firefox+C ...

  3. MCS-51单片机I/O端口的存取

    MCS-51单片机通常有4个8位I/O端口, 向各端口的写数据均写入到对应端口的锁存器中, 但对各端口的读操作却有两个方式:读锁存器和读引脚 1 读-修改-写操作    Pn(指P0,P1,P2,P3 ...

  4. hibernate 映射<四>多对一双向映射

    学生和班级的例子来说,多个学生可以对应一个班级. 1.站在学生角度来说,学生就是多端.那么我们可以通过多对一来维护2者的关系. 2.站在班级的角度来说,班级就是一端.那么我们可以通过一对多啦维护2者的 ...

  5. js中iframe的用法

    最近遇到的项目总是习惯左边一个树,点击每个树的节点右边出现相应的信息,遇到这种情况用iframe还是很简单的, 例如 : 页面文件 @section Tree{ <ul id="tre ...

  6. Onlylady介绍

    Onlylady介绍 Onlylady介绍

  7. mybatis dao无实现类的配置

    spring的配置文件 添加: <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">     ...

  8. PE基金的运作模式有哪些？

    一.信托制(1)信托型基金是由基金管理机构与信托公司合作设立,通过发起设立信托受益份额募集资金,然后进行投资运作的集合投资工具(2)信托公司和基金管理机构组成决策委员会实施,共同进行决策(3)在内部分 ...

  9. MYSQL视图的学习笔记

    MYSQL视图的学习笔记,学至Tarena金牌讲师,金色晨曦科技公司技术总监沙利穆 课程笔记的综合. 视图及图形化工具   1.       视图的定义 视图就是从一个或多个表中,导出来的表,是一个虚 ...

  10. Python初体验_基础（一）

    一:变量 变量的赋值: name = "Meng" 上述代码声明了一个变量,变量名为name,变量name的值为:"Meng" 变量定义: 一个在内存存数据的容 ...