这是一个仿校内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. uva 10034 Problem A: Freckles

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  2. QComboBox调用clear函数崩溃的问题

    项目有个需求是这样的: QComboBox需要动态清楚添加Item列表,并且之前设置了QComboBox当前index改变的信号,一旦这个clear调用,当前index就改变,因为一旦改变,信号就发出 ...

  3. http协议使用实例

    #include <stdio.h>#include <windows.h>#include <wininet.h> #define MAXSIZE 1024#pr ...

  4. Jquery伪选择器学习笔记

    对于我这个半路出家的前端,使用jquery已经很长时间了,对于选择器,一直都局限在id,class,element选择器.每次写一个元素都得想一个id,一个页面写下来想id名都想的累的慌.最近手头项目 ...

  5. HDOJ 1393 Weird Clock(明白题意就简单了)

    Problem Description A weird clock marked from 0 to 59 has only a minute hand. It won't move until a ...

  6. [LeetCode] 11. Container With Most Water My Submissions Question 解题思路

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  7. weblogic迁移随手记

    新建域的脚本weblogic  登录缓慢监听地址的修改,hosts修改vim +/securerandom /usr/java/jdk1.7.0_71/jre/lib/security/java.se ...

  8. css和js引用图片的路径问题

    原文转自:http://www.cnblogs.com/azumia/archive/2012/06/17/2552346.html 在JS文件中书写相对路径:JS文件是指在页面中引用的外部JavaS ...

  9. (转)Linux下apache限速和限制同一IP连接数的实现

    单位有一台DELL的服务器,4核双CPU,4G内存,1TB的存储空间,闲来无事,申请了域名http://www.zxzy123.cn,做了个网站,本以为用这样的配置做个下载站是绰绰有余了,没想到上线没 ...

  10. Android设备中实现Orientation Sensor(图)兼谈陀螺仪

    设备中的三自由度Orientation Sensor就是一个可以识别设备相对于地面,绕x.y.z轴转动角度的感应器(自己的理解,不够严谨).智能手机,平板电脑有了它,可以实现很多好玩的应用,比如说指南 ...