<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>微博输入框案例</title>
<style>
/* 先划分顶部中部底部三部分，再适当使用左右浮动可以一定程度上降低外边距和内边距的使用，在最后微调时再使用内外边距，整体布局会更模块化 */
body{font-size: 12px;}
.box{margin:0px auto;width:600px;height:210px;border: 9px solid pink;padding: 8px 8px;}
.box_head{padding: 5px 10px;}
.box_head_left{float: left;}
.box_head_right{float:right;padding-top:5px;color:#888;font-size: 15px;}
.box_body textarea{width:590px;height:130px;margin-top: 5px;border: 2px solid #ccc;}
.box_bottom{padding: 5px;}
.box_bottom_left{float: left;}
.box_bottom_right{float:right;}
#bt{width:80px;height:30px;border: none;background-color:peachpuff;color:white;border-radius: 5px;}
#number{font-weight: bold;}
#sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float: left;height:32px;line-height: 32px;padding-left:26px;padding-right: 10px}
#sp1{background: url(static/images/an5.png) no-repeat left center;}
#sp2{background: url(static/images/an4.png) no-repeat left center;}
#sp3{background: url(static/images/an3.png) no-repeat left center;}
#sp4{background: url(static/images/an2.png) no-repeat left center;}
#sp5{background: url(static/images/an1.png) no-repeat left center;}
#sp6{color:#888;}
</style>
<script>
var box_body_text,number,tips,bt,m;
window.onload = function (){
bt = document.getElementById("bt");
tips = document.getElementById("tips");
box_body_text = document.getElementById("box_body_text");
number = document.getElementById("number");
box_body_text.onkeyup = function (){
m = 140 - box_body_text.value.length;
if (m<0) {
number.style.color = "red";
tips.innerHTML = "已超过";
number.innerHTML = m * -1;
} else {
number.style.color = "#888";
number.innerHTML = m;
}
}
bt.onclick = function(){
m = 140 - box_body_text.value.length;//再点击按钮时再验证一边字数，有些时候再输入框无任何内容时能够直接发送并不会报错
if(m==140){
alert("您还没输入任何内容！");
//box_body_text.focus();//自动获取textarea框体内的焦点,但测试无效果，不知道时为什么
}else if (m<0) {
alert("超过发布限制的字数！");
// box_body_text.focus();//自动获取textarea框体内的焦点,但测试无效果，不知道时为什么
} else {
alert("发送成功！");
}
}
}
</script>
</head>
<body>
<div>
<div>
<div>
<img src="static/images/12.png" alt="">
</div>
<div>
<div><span id="tips">还可输入</span><span id="number">140</span>字</div>
</div>
</div>
<div>
<textarea name="" id="box_body_text"></textarea>
</div>
<div>
<div>
<span id="sp1">表情</span>
<span id="sp2">图片</span>
<span id="sp3">视频</span>
<span id="sp4">话题</span>
<span id="sp5">长微博</span>
</div>
<div>
<span id="sp6">公开</span>
<input type="button" value="发布" id="bt">
</div>
</div>
</div>
</body>
</html>
2019-01-13 21:40:34254