微博输入字数限制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body{
margin:0px;
padding:0px;
background-image:url(../images/mm_body_bg.jpg);
}
#content{
//border:#000 thin 2px;
width:850px;
margin:0px auto;
padding:45px 0px 0px 0px;
//background:#D2EAEE repeat;
}
#cont_Right{
background:#FFF;
width:605px;
height:auto;min-height:500px;
margin:0px auto;
padding:0px;
display:block;
float:right;
}
#share{
//background-color:#CCC;
width:550px;
height:175px;
margin:0px auto;
//border-bottom:1px solid #CCCCCC;
padding:0px;
}
#word{
margin:15px 0px 0px 20px;
padding:0px;
}
#box{
background-color:#063;
width:550px;
height:90px;
}
.box1{
width:542px;
height:50px;
margin:7px 0px 0px 0px;
padding:2px 3px 0px 3px;
}
.box2{
width:540px;
height:60px;
border: 1px solid #CCCCCC;
margin:0px;
padding:8px 0px 0px 4px;
font-family:Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 12px;
}
#sub{
float:right;
margin:5px 0px 0px 0px;
}
</style>
<title>模仿新浪微博</title>
</head>
<body>
<div id="content">
<div id="cont_Right">
<div id="share">
<div id="word"><img src="http://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"style="width:500px">
<div class="aviableCount">还可以输入<span id="sp">140</span>字</div>
</div>
<div id="box">
<div class="box1">
<!--设置最大输入字符长度为140-->
<textarea onkeyup="show()" cols="55" rows="25" style="resize: none" name="weiboTextArea" id="weiboTextArea" class="box2" maxlength="140"></textarea>
</div>
</div>
<div id="sub">
<input name="submit" type="button" value="发送"/>
</div>
</div>
</div>
<script>
function show(){
var tarea=document.getElementById("weiboTextArea");
var maxlength=140;
var length=tarea.value.length;
var count=maxlength-length;
var sp=document.getElementById("sp");
sp.innerHTML=count;
if(count<=25){
sp.style.color="red";
}else{
sp.removeAttribute("style");
}
}
</script>
</body>
</html>