观察了微博发布框，
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/ 谢谢