微博输入字数功能实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微博输入</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.box{width:500px;height:190px;margin:10px auto;border: 5px solid #0080c0;}
.box p{margin: 0;}
.box .lt{padding: 8px 10px;float: left;font-size: 16px;color:#1B7FB6;}
.box .rt{padding: 8px 10px;float: right;font-size: 14px;}
#text{width: 485px;height: 100px;float: left;margin: 0px 5px;resize:none;border: 1px solid #ccc;}
.huati{height:20px;float: left;margin:10px 0px;}
.huati #sp1,#sp2,#sp3,#sp4,#sp5{float: left;font-size: 14px;color: #201a1a;text-decoration: none;}
.huati i{margin:2px 3px 0px 5px;float: left;}
.butt{float: right;}
#bt{background: darkorange;color: #fff; width:80px;height:30px;line-height: 30px;text-decoration: none; margin:5px;text-align: center;border-radius: 3px;border: none;}
</style>
<script>
var text,num,m
window.onload=function(){
text = document.getElementById('text')
num = document.getElementById('num')
bt = document.getElementById('bt')
text.onkeyup=function wb(){
m = 140-text.value.length
if(m<0){
num.style.color="red"
}else{
num.style.color="#888"
}
num.innerHTML= m
}
bt.onclick=function(){
if(m==140){
alert("发布内容不能为空！")
text.focus()
}else if(m<0){
alert("字数过多请调整！")
}else{
text.focus()
alert("发布成功！")
}
}
wb()
}
</script>
</head>
<body>
<div class="box">
<p class="lt">有什么新鲜事想告诉大家?</p>
<p class="rt">还可以输入 <span id="num"></span>字</p>
<textarea id="text"></textarea>
<div class="huati">
<i class="fa fa-meh-o" style="color:darkorange;"></i><span id="sp1">表情</span>
<i class="fa fa-picture-o"style="color:#008000;"></i><span id="sp2">图片</span>
<i class="fa fa-video-camera"style="color:#0080ff;"></i><span id="sp3">视频</span>
<i class="fa fa-hashtag"style="color:#0080ff;"></i><span id="sp4">话题</span>
<i class="fa fa-bolt"style="color:#f60;"></i><span id="sp5">头条文章</span>
</div>
<div class="butt">
<input type="button" value="发布" id="bt">
</div>
</div>
</body>
</html>