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

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

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

效果图：

代码：

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link href="css/home.css" rel="stylesheet" type="text/css"/>
    <script src="js/home.js"></script>
    <title>模仿新浪微博</title>
</head>
<body>
    <div id="content">
        <div id="cont_Right">
            <div id="share">
                <div id="word"><img src="data:images/send_weibo.png"/>
                    <div class="aviableCount">还可以输入<span id="sp">140</span>字</div>
                </div>
                <div id="box">
                    <div class="box1">
                        <!--设置最大输入字符长度为140-->
                        <textarea onkeyup="show()"  cols="55" rows="25" style="resize: none" name="weiboTextArea" id="weiboTextArea" class="box2" maxlength="140"></textarea>
                    </div>
                </div>
           <div id="sub">
            <input name="submit" type="button" value="广播"/>
        </div>
    </div>
</div>
</body>
</html>

js:

function show(){
                       var tarea=document.getElementById("weiboTextArea");
                       var maxlength=140;
                       var length=tarea.value.length;
                       var count=maxlength-length;

                       var sp=document.getElementById("sp");
                       sp.innerHTML=count;
                       if(count<=25){
                        sp.style.color="red";
                    }else{
                       sp.removeAttribute("style");
                   }
               }

css:

@charset "utf-8";

body{
    margin:0px;
    padding:0px;
    background-image:url(../images/mm_body_bg.jpg);
}
#content{
    //border:#000 thin 2px;
    width:850px;
    margin:0px auto;
    padding:45px 0px 0px 0px;
    //background:#D2EAEE repeat;

}
#cont_Right{
    background:#FFF;
    width:605px;
    height:auto;min-height:500px;
    margin:0px auto;
    padding:0px;
    display:block;
    float:right;
}
#share{
    //background-color:#CCC;
    width:550px;
    height:175px;
    margin:0px auto;
    //border-bottom:1px solid #CCCCCC;
    padding:0px;
}
#word{
    margin:15px 0px 0px 20px;
    padding:0px;
}
#box{
    background-color:#063;
    width:550px;
    height:90px;
}
.box1{
    width:542px;
    height:50px;
    margin:7px 0px 0px 0px;
    padding:2px 3px 0px 3px;
}
.box2{
    width:540px;
    height:60px;
    border: 1px solid #CCCCCC;
    margin:0px;
    padding:8px 0px 0px 4px;
    font-family:Tahoma, Geneva, sans-serif;
    font-weight: normal;
    font-size: 12px;
}

#sub{
    float:right;
    margin:5px 0px 0px 0px;
}

用到的图片：

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. 使用Application Insights 做分析

    Application Insights on Windows Desktop apps, services and worker roles : https://azure.microsoft.co ...

  2. 1214 - Large Division -- LightOj（大数取余）

    http://lightoj.com/volume_showproblem.php?problem=1214 这就是一道简单的大数取余. 还想还用到了同余定理: 所谓的同余,顾名思义,就是许多的数被一 ...

  3. 如何更改OS系统下截图生成图片格式 jpg pdf

    Mac系统下快速截屏的快捷键: 1.截全屏: shift + command + 3 2.选取截屏 shift + command + 4 生成的图片,系统默认格式忘了,反正不好用,用下面命令更改生成 ...

  4. 解决拖拽有内容的div的bug和兼容问题

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  5. DeliciousRetouch加强中文版v3.0-支持CS6--C鲁中C 2015.5 影楼磨破插件

    支持PS CC至最新版CC 2015.5下载地址: [点击下载] 支持系统Win/Mac 画像修版"美味修整3"扩展Photoshop 您需要使用的所有工具DR3扩展,这里的顶部面 ...

  6. 修改centos启动项

    centos7下修改启动项在路径/etc/grub.d/文件路径下,修改完成之后需要运行命令 grub2-mkconfig --output=/boot/grub2/grub.cfg

  7. jboss hello world

    http://developers.redhat.com/products/devstudio/get-started/ 1. 下载 Red Hat JBoss Developer studio 2. ...

  8. C++是一把很奇怪的刀

    C++是一把很奇怪的刀,首尾都是刀刃.用刀能出什么,还是要看拿刀的人.

  9. UI拼图导出脚本，兼容cegui的ImageSet格式

    该脚本用于photoshop,美术可以先用photoshop拼接图片,在加载该脚本导出xml格式的文件,该文件记录了每个小的图片坐标信息 // Copyright 2002-2003. Adobe S ...

  10. zookeeper 简介

    一.简介 zookeeper是hadoop的一个子项目,A distribute coordination service for distributed applications 为了分布式应用而开 ...