功能：实现新浪微博输入字数提醒功能；最多输入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. kiosk-mode，免密码登陆， sideload Windows Store apps 等

    MVVM带来的性能问题及其解决方案  MVVM 和语言性能提示:https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/mt628050. ...

  2. SQL Split

    最初是根据数据ID批量删除数据,因为不知道到底是要删除多少条,而T-sql里也没有像C#中params这样方便的东西,所以想到字符串分割,但是发现T-sql中也没有提供字符串分割的函数,所以自己搜索了 ...

  3. Features

    imhist分析灰度图阈值分界点 bwlabel分析连通区域 SIFT Scale Invariant:尺度不变性 DoG: Difference of Gaussian, calculated by ...

  4. android 不同dpi图标大小

    LDPI (Low Density Screen,120 DPI),其图标大小为 36 x 36 px.MDPI (Medium Density Screen, 160 DPI),其图标大小为 48 ...

  5. tail queue代码阅读

    tail queue是bdb中用的最多的数据结构. 定义在 src/dbinc/queue.h: 注: TRACEBUF,QMD_TRACE_HEAD等是为了 queue代码的debug, 这里移除出 ...

  6. CMM能力成熟度模型

    CMM把软件企业的过程管理能力划分为5个等级: 1  .初始级:个别的.混乱无序的过程,软件缺乏定义,项目的成功严重依赖于某几个关键人员的努力.软件质量由个人的开发经验来保障. 2.可重复级 实施了基 ...

  7. SQL导入Excel文件

    如果表已存在,SQL语句为: insert into aa select * from OPENDATASOURCE('Microsoft.Jet.OLEDB.4.0', 'Data Source=D ...

  8. Android addHeaderView和setAdapter的调用顺序后报错

    在4.4之前的系统,setAdapter后再设置addHeaderView会爆 ListView想要添加headerview的话,就要通过addHeaderView这个方法,然后想要为ListView ...

  9. vb小菜一枚-----了解“类型推理”

    局部类型推理 (Visual Basic) Visual Studio 2013   其他版本   Visual Basic 编译器使用类型推理来确定未使用 As 子句声明的局部变量的数据类型. 编译 ...

  10. 升级到win8.1右键响应慢

    网上很多资料都是在显卡上做文章,试了N次确定不是这个问题. 后来查到这个好用了.以管理员身份运行 下面代码保存bat即可 regsvr32 /u /s igfxpph.dll reg delete H ...