这是一个仿校内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. Lua----注意事项

    前言:Lua相对一般的语言相对简单,有c基础看一遍就差不多了.一般的代码都能够看懂.但是Lua也有一些自己的特点,区别与其他语言,这里需要注意一下. 1.数组下标 在Lua中数组下标是从1开始计数的. ...

  2. Swift—扩展声明-备

    声明扩展的语法格式如下: extension 类型名 { //添加新功能 } 声明扩展的关键字是extension,“类型名”是Swift中已有的类型,包括类.结构体和枚举,但是我们仍然可以扩展整型. ...

  3. 小脚本一则---CDH的批量部署中,如果是从ESXI的VCENTER的模板生成的虚拟机,如何快速搞定网络网络卡配置?

    当然,在作模板的过程中,我们除了要定义好SELINUX,IPTABLES之后, HOSTS文件维护,用ZOOKEEPER还是RSYNC实现? 都要在前期好好规划.. 脚本如下,一般改成自己的就可以用. ...

  4. 【转】用串口登录Beaglebone Black、用usb共享电脑网络、内核模块的本地编译

    原文网址:http://bbs.eeworld.com.cn/thread-431507-1-1.html 串口连接BBB使用usb线可以连接BBB和电脑,用ssh就可以登录BBB来进行操作.但有时候 ...

  5. RenderBody, RenderPage and RenderSection methods in MVC 3

    原文地址:http://www.codeproject.com/Articles/383145/RenderBody-RenderPage-and-RenderSection-methods-in R ...

  6. v4l2采集视频和图片源码

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <assert.h&g ...

  7. 兼容ie6/ff/ch/op的div+css实现的圆角框

    <!DOCTYPE html> <html> <head> <title>青春不迷茫:寻梦时代的“蚁族”逆袭之旅- 职场管理专题-中国人力资源开发网-中 ...

  8. [每日一题] 11gOCP 1z0-053 :2013-09-30 ASMCMD.......................................................8

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/12206095 正确答案:BCD 为了使ASM文件管理更简单,Oracle提供了一个命令实用 ...

  9. qemu-img 快照的一些总结

    qemu-img 快照的一些总结 http://www.openext.org/2014/06/qemu-img-snapshot-re http://blog.csdn.net/muge0913/a ...

  10. Java基础知识强化41:StringBuffer类之StringBuffer的反转功能

    1. StringBuffer 的反转功能: public StringBuffer reverse(): 2. 案例演示: package cn.itcast_05; /* * StringBuff ...