js微博发布框的实现

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

观察了微博发布框，

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>