功能：实现新浪微博输入字数提醒功能；最多输入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. WCF 套接字连接已中止。这可能是由于处理消息时出错或远程主机超过接收超时或者潜在的网络资源问题导致的

    一个项目需要用到推送的功能,就是服务器主动推送数据给多台客户机.于是采用了WCF的双工通讯netTcpBinding 写好的项目,在本机测试都没有问题. 如果放在局域网内测试,问题出来了:先是安全性问 ...

  2. Android中如何收听特定应用安装成功的广播

    一.manifest的配置 <receiver android:name=".AppReceiver"> <intent-filter> <actio ...

  3. MyBatis使用动态SQL标签的小陷阱

    现在MyBatis越来越受大家的喜爱了,它的优势大家都知道,我就不多说了,直接说重点. MyBatis中提供动态SQL功能,我们可以使用<if><when><where& ...

  4. eclipse快速移动项目到另一台机器_步骤

    ​快速移动项目到另一台机器_步骤 1.设置好eclipse的编码,必须对应个人项目文件的编码{ window--preferences--general--workspace-text file en ...

  5. Java中将0x开头的十六进制字符串转换成十进制整数

    1.Integer.toString(int i) 由于input(输入数据)是以0x开头的字符串,并不是整型.因而在用 String s = Integer.toString(input); 时用会 ...

  6. linux性能检测工具

  7. JS中可拖拽的甘特图和流程图

    甘特图: https://www.douban.com/note/441706674/ https://www.uedsc.com/jquery-ganttview.html https://gith ...

  8. 无法导入以下密钥文件: xxxx.pfx,该密钥文件可能受密码保护 的解决方案

    无法导入以下密钥文件: xxxx.pfx,该密钥文件可能受密码保护.若要更正此问题,请尝试再次导入证书,或手动将证书安装到具有以下密钥容器名称的强名称 CSP: VS_KEY_A5A29909FF6D ...

  9. js 获取样式兼容方法

    function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return ...

  10. 在WPF的WebBrowser控件中屏蔽脚本错误的提示

    在WPF中使用WebBrowser控件显示网页时,经常会报脚本错误的提示,如何屏蔽掉这些错误提示呢.方法是定义如下方法: public void SuppressScriptErrors(WebBro ...