这是一个仿校内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. 重构遗留程序的一次案例学习（java程序）

    遗留代码经常是腐臭的,每个优秀的开发者都想把它重构.而进行重构的一个理想的先决条件是,它应该包含一组单元测试用例,以避免产生回归缺陷.但是为遗留代码编写单元测试可不是件容易的事,因为它经常是一团糟.要 ...

  2. 64位系统ADB

    应该把ADB文件放在C:\Windows\SysWOW64目录下面,而不是System32下.

  3. Android 常用对话框Dialog封装

    Android 6种 常用对话框Dialog封装 包括: 消息对话框.警示(含确认.取消)对话框.单选对话框. 复选对话框.列表对话框.自定义视图(含确认.取消)对话框 分别如下图所示:       ...

  4. Gridview中将某列的背景设置为绿色

    状态字段是:archivesStatus,archivesStatus为1时,设置背景色 protected void gvInfo_RowDataBound(object sender, GridV ...

  5. Changing a Service's Configuration

    Changing a Service's Configuration   A service configuration program uses the ChangeServiceConfig an ...

  6. Resharper TAB 傻吊

    直接把tools中的模板全选删除掉!

  7. sqlserver的rownum

    oracle: select  rownum from department sqlserver: select   row_number() over (order by id)  from dep ...

  8. 【翻译】五步快速使用LINQPad尝鲜StreamInsight

    StreamInsight  学习地址:http://www.cnblogs.com/StreamInsight/archive/2011/10/26/StreamInsight-Query-Seri ...

  9. eclipse 解决插件失效

    昨天系统崩溃,重装系统后eclipse突然对links方式加载插件失效.用尽了网上各种解决方法,始终不行.在%eclispe_dir%/configration/org.eclipse.update/ ...

  10. linux loadavg详解（top cpu load）

    目录 [隐藏] 1 Loadavg分析 1.1 Loadavg浅述 1.2 Loadavg读取 1.3 Loadavg和进程之间的关系 1.4 Loadavg采样 2 18内核计算loadavg存在的 ...