观察了微博发布框，

1.发现他的剩余文字是动态改变的，

2.且文字为零时 发布框颜色为暗色

3.文字不符合标准时提交不通过

整理了一下思路 js会主要用到的方法

　　1.onclick() //点击发布时触发

　　2.onmouseover()// 鼠标滑到 发布  触发

　　3.onmouseout() //鼠标离开 发布  时触发

　　4.onfocus() //点击到 输入框 时触发

　　5.onblur() //点击到 输入框 以外的区域触发

　　6.oninput() //输入内容改变时触发

以下是实现的思路

　　1.基本样式的实现 （就不赘述了）

　　2.判断输入框的内容 当没输入时 发布 一栏为暗色 当鼠标点击到输入框时 边框阴影出现 且文字提示出现 并随着文字输入增加相应数字减少

　　3.当鼠标点击到输入框外的内容时 ，边框阴影消失 文字提醒消失

　　4.当文字<=0 || >140时 发布 为暗色 且 当>140时 文字会提示超过的字数并建议转为长微博

　　5.定义getLength方法  来获取当前输入框的字数（当输入为汉字时 长度以aa计算） （用正则替换）

　　6.定义toChange方法 来修改输入框的数字变化

　　　　具体是修改innerHTML 来修改数字 并且在oninput执行时触发

以下是代码实现

<!DOCTYPE html>

<html>

<head land="en">

    <meta charset="UTF-8">

    <title>微博发布框</title>

    <style type="text/css">

        *{padding:0;margin: 0;font-size: 12px;}

        .weibodiv{

            margin: 20px auto;

            width: 600px;

        }

        .ad{

            background: url(img/1.png) no-repeat;

            width: 291px;

            height: 37px;

            display: block;

            float: left;

        }

        .adtext{

            float: right;

            position: relative;

            top: 14px;

            line-height: 37px;

            height: 37px;

        }

        .weibotext{

            float: left;

            top: 30px;

            margin: 5px auto;

            display: block;

        }

        textarea{

            height: 170px;

            width: 590px;

            border: 1px solid rgb(64,224,208);

            font-size: 20px;

            overflow: auto;

        }

        #weibotextnum{

            float: right;

            font-size: 14px;

    /*         opacity: 0; */

        }

        #weibotextnumber{

            font-size: 20px;

            font-family:Bell MT;

        }

        .post{

            width: 80px;

            height: 30px;

            border: 1px solid;

            text-align: center;

            font-size: 20px;

            text-decoration: none;

            border-radius: 5px;

            color: #ffffff;

            background: #8BC528;

            font-weight: bold;

            float: right;

            margin: 3px;

            letter-spacing: 5px;

            line-height: 30px;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div class="weibodiv">

        <a href="" class="ad"></a>

        <a href="" class="adtext">点击牛运按钮 赢取码上好礼</a>

        <div class="weibotext">

            <textarea></textarea>

            <span id = "weibotextnum">还能输入<span id="weibotextnumber">140</span>字</span>

        </div>

        <span class="weibobottomlink"><img src="img/2.png" alt=""></span>

        <a href="" class="post">广播</a>

        <script type="text/javascript">

            window.onload = function(){

                var oT = document.getElementsByTagName('textarea')[0];//获取到输入框

                var weibotext = document.getElementsByClassName('weibotext');////获取到输入区外容器

                var weibotextnum = document.getElementById('weibotextnum');

                var weibotextnumber = document.getElementById('weibotextnumber');

                var oA = document.getElementsByClassName('post')[0];

                 var ie = !-[1,];//判断是否为IE

                 //输入内容时执行

                 if(ie){

                     oT.onpropertychange = toChange;

                 }else{

                     oT.oninput = toChange;

                 }

                oT.onfocus = function(){

                    oT.style.border  = "1px #40E0D0 solid";

                    oT.style.boxShadow  = "0 0 10px #5CACEE";

                    weibotextnum.style.opacity = "1";

                    var num = Math.ceil(getLength(oT.value)/2);

                    if(num==""){

                        oA.style.background = "#7F7F7F";//第一次没字时应该为时是黑色

                    }

                }

                oT.onblur = function(){

                    weibotextnum.style.opacity = '0';

                    oT.style.boxShadow  = "";

                    oA.style.background = '#8BC528';

                }

                oA.onmouseover = function(){

                    oA.style.background = '#7CCD7C';

                    oT.blur();

                }

                oA.onmouseout = function(){

                    oA.style.background = '#8BC528';

                }

                oA.onclick = function(){

                    var num = Math.ceil(getLength(oT.value)/2);

                    if(num==0 || num>140){

                        alert("不符合发布要求，请检查");

                        return false;

                    }else{

                        alert("发布成功！");

                        oT.value = "";

                        weibotextnumber.innerHTML="140";

                    }

                }

                function toChange(){

                    var num = Math.ceil(getLength(oT.value)/2);

                    if(num<=140){

                        weibotextnum.innerHTML = "还能输入<span id='weibotextnumber'></span>字";

                        weibotextnumber = document.getElementById('weibotextnumber');

                        weibotextnumber.innerHTML = 140-num;

                        weibotextnumber.style.color = '';

                    }

                    else{

                        weibotextnum.innerHTML = "超出字数<span id = 'weibotextnumber'></span> 您可以转为<a href='#'>长微博</a>发送"

                        weibotextnumber = document.getElementById('weibotextnumber');

                        weibotextnumber.innerHTML = 140 - num;

                        weibotextnumber.style.color = 'red';

                    }

                    if(num>140 || oT.value==""){

                        oA.style.background = "#7F7F7F";

                    }else{

                        oA.style.background = "#8BC528";

                    }

                }

                function getLength(str){

                    return String(str).replace(/[^\x00-\xff]/g,'aa').length;//当为汉字时以aa为算长度

                }

            }

        </script>

    </div>

</body>

</html>

引用前请标明出处：http://www.cnblogs.com/zkhzz/ 谢谢

js微博发布框的实现的更多相关文章

  1. js微博发布框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生JS+tween.js模仿微博发布效果

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: <!DOCTYPE ht ...

  3. [js高手之路]设计模式系列课程-委托模式实战微博发布功能

    在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 <ul> < ...

  4. 原生JavaScript 全特效微博发布面板效果实现

    javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...

  5. 微博发布效果jq版

    大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...

  6. VUE实现微博发布效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. js控制文本框只能输入中文、英文、数字与指定特殊符号.

    先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...

  8. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  9. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

随机推荐

  1. iOS - 如何切图适配各种机型

    关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选 ...

  2. 106运用SWITCH语句打印星期几的单词

    package com.chongrui.test;/*运用SWITCH语句打印星期几的单词 * */ public class TypeConvertion { public static void ...

  3. Linux正则表达式

    正则表达示的组成: 一般字符:没有特殊意义的字符 特殊字符(meta字符):元字符,有在正则表达式中有特殊意义 正则表达式中常见的meta字符 POSIX BRE与ERE中都有的meta字符 \ 通常 ...

  4. Physics(物理系统)

    物理: Physics            Box2d   Unity 内置NVDIA PhysX物理引擎 刚体:要使一个物体在物理控制下,简单添加一个刚体给它.这时,物体将受重力影响,并可以与其他 ...

  5. Fragment滑动切换简单案例

    Fragment的产生与介绍Android运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视.针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套App,然后拷贝一份,修改布局以适应平板神 ...

  6. 在iIBatis中使用MySql中出现的配置问题

    1.首先需要下载mySQL-connector-net的安装包.可以通过下面两种方式,第一种是需要安装的,第二种是直接可以下载使用的. 第一种: http://dev.mysql.com/downlo ...

  7. [转]MSI安装程序中的文件替换

    原文链接:http://teach.hanzify.org/article/652-1233562028.html 前言 最近有汉化朋友问起如何不重新制作MSI文件,而直接用汉化好的文件替换MSI安装 ...

  8. lamp

      Linux+Apache+Mysql/MariaDB+Perl/PHP/Python一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立 的程序,但是因为常被放在一起使用,拥有了越来越高的 ...

  9. SpringMVC -- 注解

    @Entity -- 实体类@Table(name = "hat_province", catalog = "news") -- 对应的表name -- 表名c ...

  10. 从倒影说起，谈谈 CSS 继承 inherit（转）

    从倒影说起,谈谈 CSS 继承 inherit 给定一张有如下背景图的 div: 制作如下的倒影效果: 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我 ...