功能：实现新浪微博输入字数提醒功能；最多输入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. java-base64编码和解码

    一.反射/*** * encode by Base64 */ public static String encodeBase64(byte[]input) throws Exception{ Clas ...

  2. 对button或radiobutton制作样式

    制作样式在drawable中进行 (cheakbox)在样式中点击变换图片,<selector> <item android:state_checked="true&quo ...

  3. home键通知

    NSNotificationCenter.defaultCenter().addObserver(self, selector: Selector("closeAlert"), n ...

  4. CentOS 7下设置DNS服务器

    在CentOS 7下,手工设置 /etc/resolv.conf 里的DNS,过了一会,发现被系统重新覆盖或者清除了.和CentOS 6下的设置DNS方法不同,有几种方式: 1.使用全新的命令行工具 ...

  5. 我与solr(一)--solr的配置与安装

    感谢upxiaofeng的分享,转载自http://blog.csdn.net/zoubf/article/details/51505940 准备工作: 目前最新版本6.0.下载solr 6.0:So ...

  6. 置入式模型inclusion model和显示具现化

    1.置入式模型 链接错误: 大多数非模板程序代码的组织如下:A,类声明在头文件中: B:全局变量和非inline函数在cpp文件中定义 但是,如果模板程序也这样组织,则会出错.原因在于:函数模板的定义 ...

  7. vs.net2008工具栏上找不到debug/release选项

    使用vs.net多年,以前不时会用到release发布,近几年几乎不用的.近来生成时感觉有些项目使用了release选项,因为生成的dll的位置变了.于是想调整回bebug,发现vs.net2008的 ...

  8. js在head里插入style样式

    代码如下: var nod = document.createElement('style'), str = 'body{background:#000;color:#fff} a{color:#ff ...

  9. 获取基于Internet Explorer_Server的聊天窗口内容

    假设在得到窗体中控件的句柄(通过SPY++)的前提下,如果是像文本框这种控件,只要用SendMessage就可得到文本了,但是对于聊天记录窗口却行不通(返回空值),因为那其实是一个内置浏览器Inter ...

  10. PHP的高效IOC框架——CanoeDI

    一个非常简单且实用的IoC框架,相对于其他的Ioc框架有如下特点: 高效: 框架使用了非常实用且高效的算法,使得框架本身对应用的影响微乎其微,且框架提供了C扩展,最大限度的将性能提升到最高. 配置简单 ...