标签：
引用前请标明出处：http://www.cnblogs.com/zkhzz/ 谢谢
观察了微博发布框，
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/p/4966342.html
