功能：实现新浪微博输入字数提醒功能；最多输入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. c# 筛选进程命令行,得其ProcessId(唯一标示符,简称pid),再通过pid结束进程

    不说别的,上代码 部分using: using System.Diagnostics; using System.Management; 其中要引用System.Management 1.通过筛选Co ...

  2. Centos 反向代理创建资料

    1. yum update 2. sh centos.sh 3. sh upgrade_nginx.sh nginx 1.7.0 4. cd /usr/local/nginx/conf/ upload ...

  3. IIS支持解析json

      IIS支持解析json 一. windows XP   1． MIME设置: 在IIS的站点属性的HTTP头设置里,选MIME 映射中点击"文件类型"-"新类型&qu ...

  4. protobuf坑1

    或者说特性吧,没仔细看protobuf代码,也许我还理解不够. 按照陈硕大牛的这篇帖子的介绍,“它包含了程序编译的时候所链接的全部 protobuf Message types” 实际开发过程中发现必 ...

  5. Apache连接PHP后无法启动问题解决思路

    问题:apache之前正常,连接配置完PHP后无法启动,用apache Test Configration测试后报错形式为: Cannot load D:/php/php5apache2_2.dll ...

  6. SQL之DDL

    DDL是SQL定义语言,它主要包括三个关键字:create  ,alter , drop(数据库关键字不分大小写 ),主要操作对象 有数据库.表.索引.视图等 操作                   ...

  7. MSVCRTD.lib(mfc.obj) : error LNK2019: 无法解析的外部符号 _WinMain@16，该符号在函数 ___tmainC (转)

    一.问题描述 我所使用的编程环境:VS2010 出现的问题如下: MSVCRTD.lib(mfc.obj) : error LNK2019: 无法解析的外部符号_WinMain@16,该符号在函数 _ ...

  8. selenium总结篇，常见方法和页面元素的操作【转】

    原文:http://www.cnblogs.com/tobecrazy/p/4570494.html 今天,总结一下selenium怎么操作web页面常见的元素. 主要有: 上传 alter dial ...

  9. java-集合类

    框架图 集合类 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一种方式.数组和集合类同是容器,有何不同?数组存储同一类型的基本数据类 ...

  10. 关于winform中*.exe.config中的appSettings的节点的读取与修改

    //读取到这个节点 string file = System.Windows.Forms.Application.ExecutablePath; Configuration config = Conf ...