观察了微博发布框，

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. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  2. 自己搭建了一个简单实用的Web版记事本

    演示播放地址:http://v.youku.com/v_show/id_XMTg0MjY2OTAxNg==.html 技术说明 环境 vs2012开发 sql2008r2数据库 技术 C#基础语言 M ...

  3. 【Java EE 学习 67 上】【OA项目练习】【JBPM工作流的使用】

    OA项目中有极大可能性使用到JBPM框架解决流程控制问题,比如请假流程.报销流程等等. JBPM:JBoss Business Process Management,翻译过来就是业务流程管理.实际上就 ...

  4. Python Web 方向（一）

    Python Web 方向(一) --------Django站点创建 文章地址:http://www.cnblogs.com/likeli/p/5821744.html Python版本:2.7 推 ...

  5. web适配问题

    bootstrap模板为使IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可. <script src="https://oss.maxcdn.c ...

  6. WEB开发入门

    对服务器的概念需要更新一下: 从物理上来说,服务器就是一台PC机,至少8核,以T计算,带宽100M以上 一般有的服务器 1. web服务器 -- PC机上安装一个具有web服务的软件 2. 数据库服务 ...

  7. css common 通用

    /*common*/ body{ color:#666666; font-size:12px; margin:; padding:; font-family:"Arial",&qu ...

  8. 如何在EF中实现left join（左联接）查询

    在EF中,当在dbset使用join关联多表查询时,连接查询的表如果没有建立相应的外键关系时,EF生成的SQL语句是inner join(内联),对于inner join,有所了解的同学都知道,很多时 ...

  9. asp.net mvc自定义JsonResult类来防止MaxJsonLength超过限制

    前不久在做一个项目的时候,我用到了mvc的webapi返回了一个大数据,结果报了500错误,如下图所示: Server Error in ‘/’ Application. Error during s ...

  10. 伪类before和after

     以你添加的元素为基础!在他的里面!也就是他的内容的前面或者后面添加东西!  如果原来的元素没有内容会出现什么情况?(伪类的宽和高和元素的相等)