功能：实现新浪微博输入字数提醒功能；最多输入140个字，当输入字时，上面提示部分字数发生变化，如果字数小于25，字体颜色变红；当可输入字数为0时，强制不能输入，如果用中文输入法

一次性输入很多字，那么将自动丢失后面的字。

原理：根据js中onkeyup()函数获取键盘监听事件，来改变文字的同时监听文本域中文字的数量。

效果图：

代码：

html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <link href="css/home.css" rel="stylesheet" type="text/css"/>
  6.     <script src="js/home.js"></script>
  7.     <title>模仿新浪微博</title>
  8. </head>
  9. <body>
  10.     <div id="content">
  11.         <div id="cont_Right">
  12.             <div id="share">
  13.                 <div id="word"><img src="data:images/send_weibo.png"/>
  14.                     <div class="aviableCount">还可以输入<span id="sp">140</span>字</div>
  15.                 </div>
  16.                 <div id="box">
  17.                     <div class="box1">
  18.                         <!--设置最大输入字符长度为140-->
  19.                         <textarea onkeyup="show()"  cols="55" rows="25" style="resize: none" name="weiboTextArea" id="weiboTextArea" class="box2" maxlength="140"></textarea>
  20.                     </div>
  21.                 </div>
  22.            <div id="sub">
  23.             <input name="submit" type="button" value="广播"/>
  24.         </div>
  25.     </div>
  26. </div>
  27. </body>
  28. </html>

js:

  1. function show(){
  2.                        var tarea=document.getElementById("weiboTextArea");
  3.                        var maxlength=140;
  4.                        var length=tarea.value.length;
  5.                        var count=maxlength-length;
  6.  
  7.                        var sp=document.getElementById("sp");
  8.                        sp.innerHTML=count;
  9.                        if(count<=25){
  10.                         sp.style.color="red";
  11.                     }else{
  12.                        sp.removeAttribute("style");
  13.                    }
  14.                }

css:

  1. @charset "utf-8";
  2.  
  3. body{
  4.     margin:0px;
  5.     padding:0px;
  6.     background-image:url(../images/mm_body_bg.jpg);
  7. }
  8. #content{
  9.     //border:#000 thin 2px;
  10.     width:850px;
  11.     margin:0px auto;
  12.     padding:45px 0px 0px 0px;
  13.     //background:#D2EAEE repeat;
  14.  
  15. }
  16. #cont_Right{
  17.     background:#FFF;
  18.     width:605px;
  19.     height:auto;min-height:500px;
  20.     margin:0px auto;
  21.     padding:0px;
  22.     display:block;
  23.     float:right;
  24. }
  25. #share{
  26.     //background-color:#CCC;
  27.     width:550px;
  28.     height:175px;
  29.     margin:0px auto;
  30.     //border-bottom:1px solid #CCCCCC;
  31.     padding:0px;
  32. }
  33. #word{
  34.     margin:15px 0px 0px 20px;
  35.     padding:0px;
  36. }
  37. #box{
  38.     background-color:#063;
  39.     width:550px;
  40.     height:90px;
  41. }
  42. .box1{
  43.     width:542px;
  44.     height:50px;
  45.     margin:7px 0px 0px 0px;
  46.     padding:2px 3px 0px 3px;
  47. }
  48. .box2{
  49.     width:540px;
  50.     height:60px;
  51.     border: 1px solid #CCCCCC;
  52.     margin:0px;
  53.     padding:8px 0px 0px 4px;
  54.     font-family:Tahoma, Geneva, sans-serif;
  55.     font-weight: normal;
  56.     font-size: 12px;
  57. }
  58.  
  59. #sub{
  60.     float:right;
  61.     margin:5px 0px 0px 0px;
  62. }

用到的图片：

1.

2.

js模仿新浪微博限制字数输入的更多相关文章

  1. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  2. js控制文本框只能输入中文、英文、数字与指定特殊符号.

    先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...

  3. js限制文本框只能输入数字方法小结(转)

    这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入数字的方法,需要的朋友可以参考下   有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数 ...

  4. js限制文本框只能输入整数或者带小数点[转]

    这篇文章是关于js限制文本框只能输入整数或者带小数点的内容,以下就是该内容的详细介绍. 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢,仅允许输入整数数字或者带小数点的数字.下面这段代码也许 ...

  5. JS 控制文本框只能输入中文、英文、数字与指定特殊符号

    想做姓名输入的js判断是否是中文,但是网上找的很多是源于一篇文章的,判断中文的正则式不对,后来找到一个可以准确判断了,但是是监测里面有中文的就行,跟我想要的只能输入中文的意思相左,所以又找了下面的 J ...

  6. js模仿jquery里的几个方法parent, parentUntil, children

    有时工作需要, 也是接着上一章的方法, 用js模仿jquery里的几个方法parent, parentUntil, children. function parent(node){ return no ...

  7. js模仿块级作用域（js没有块级作用域私有作用域）

    js模仿块级作用域(js没有块级作用域私有作用域) 一.总结 1.js没有块级作用域:在for循环中定义的i,出了for循环还是有这个i变量 2.js可以模拟块级作用域:用立即执行的匿名函数:(匿名函 ...

  8. (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  9. JS动态呈现还可以输入字数

    现在觉得当我们使用js或者jquery来呈现一个动态效果时,主要还是要想清楚它的思想.它的原理.而动态呈现输入字数,其实就是给它设置一个最大输入字数,然后获取已输入的字数,自然想做什么都可以. < ...

随机推荐

  1. centos 如何清理/dev/vda1系统盘

    df-h检查一台服务器磁盘使用空间,发现磁盘已经使用了100% 思路是: 1.cd /usr 2.du -sh * 看哪个目录占用空间大 3.重复前两步,根据实际情况删除或者移走 4.日志的话可以运行 ...

  2. 读写SD

    public class SD_Files_RW extends Activity implements OnClickListener{ private String Text_of_input; ...

  3. lambda 表达式 比较时间大小

    data.Orderdetails.Where(r => r.orderstatus == id && DateTime.Compare((DateTime)r.OrderTim ...

  4. IIS报错 试图加载格式不正确 的程序集解决办法

    一般都是由于系统位数不一致导致的 方法:64位启用32应用程序兼容(推荐) 思路就是把程序池设置为对应的应用程序(即到底要不要启用32位应用程序)

  5. 实现十进制无符号整数m到十六进制数的转换功能

    /*利用顺序栈结构,编写算法函数void Dto16(unsigned int m)实现十进制无符号整数m到十六进制数的转换功能.*//******************************** ...

  6. nginx负载均衡最新

    配置conf文件 #user  nobody;worker_processes  1;#error_log  logs/error.log;#error_log  logs/error.log  no ...

  7. list对象属性排序

    Collections.sort(list, new Comparator<ScRel>() { @Override public int compare(Object o1, Objec ...

  8. mybatis报invalue types（）错误

    错误信息: Cause: org.apache.ibatis.reflection.ReflectionException: Error instantiating class cn.qd.mybat ...

  9. springboot使用之一：连接生产数据库，添加连接池

    项目中,难免遇到连接数据库的情形,目前来说springboot连接mybatis有两种,我这边使用的是mybatis官方提供XML方式的整合. 后面,对项目进行完善,引入了连接池,PageHelper ...

  10. 解决Chrome重启后插件被禁用的问题

      下载组策略模版,添加白名单 http://pan.baidu.com/s/1o88kcZo 打开组策略 win+r 打开运行,输入 gpedit.msc 添加模版 右键 ->管理模版 -&g ...