微博输入框的布局及输入
她的國2019-01-14 15:59:26415<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>weibo</title>
<style>
*{
font-size: 14px;
color: #ccc;
}
.box{
width: 620px;
height: 180px;
border: 5px solid pink;
margin:30px auto;
background: url(images/body_bg.jpg) no-repeat;
}
img{
float: left;
margin-top:5px;
margin-left:5px;
}
.box1{
float: right;
margin-right:20px;
margin-top:5px;
}
.box2 span{
width: 30px;
height: 32px;
line-height: 32px;
float: left;
padding-left: 30px;
margin-left: 10px;
}
#text{
width: 600px;
height: 110px;
margin-left: 6px;
background:transparent;/*文本域背景透明*/
}
#sp1{
background: url(images/an5.png) left center no-repeat;
}
#sp2{
background: url(images/an4.png) left center no-repeat;
/* width: 30px;
height: 32px;
line-height: 32px;
float: left;
padding-left: 30px;*/
}
#sp3{
background: url(images/an3.png) left center no-repeat;
}
#sp4{
background: url(images/an2.png) left center no-repeat;
}
#sp5{
background: url(images/an1.png) left center no-repeat;
width: 50px;
}
#sp1 img{
}
.box2{
margin-left:10px;
}
.box2 input{
width: 65px;
height: 26px;
float: right;
margin-right: 25px;
background-color: red;
border: none;
color: green;
}
/*#text{
margin-top: 5px;
}*/
</style>
<script>
var txt,number,zi
window.onload=function(){
txt=document.getElementById('text') //获取id
number=document.getElementById('inp')//获取id
txt.onkeyup=function t(){
zi=140-txt.value.length//140为限制字数,减去文本框内输入的文字为实际输入文字
if(zi<0){
number.style.color="red"//<0 意味着超出140的限制
}else{
number.style.color="#ccc"
}
number.innerHTML=zi;
}
fb.onclick=function(){
if(m=140){
alert("请输入微博内容")
txt.focus()//弹出警告框后，焦距到文字框中，默认弹出后不会跳到文字框中
}else if(m<0){
alert("字数超过限制,请重新修改")
txt.focus()
}else{
alert("发布成功")
}
}
// t()
}
</script>
</head>
<body>
<div>
<img src="images/12.png" alt="">
<div>还可以输入<span id="inp"></span>zi</div>
<textarea name="" id="text"></textarea>
<div>
<span id="sp1">表情</span>
<span id="sp2">图片</span>
<span id="sp3">视频</span>
<span id="sp4">话题</span>
<span id="sp5">长微博</span>
<input type="button" value="submit" id="fb">
</div>
</div>
</body>
</html>