摘要：.wb_input { display: inline-block; background: #eee; margin: 0px auto; border-radius: 10px; } .contentxt { margin: 30px; width: 500px; height: 250px;
.wb_input {
display: inline-block;
background: #eee;
margin: 0px auto;
border-radius: 10px;
}
.contentxt {
margin: 30px;
width: 500px;
height: 250px;
border-radius: 10px;
border:10px solid pink;
}
.contentxt li {
margin-top: 10px;
margin-left: 20px;
width: 50px;
text-align: center;
}
.contentxt input {float: right;margin-right: 30px;width: 50px;margin-top: 10px}
.heads {
height: 40px;line-height: 40px;
}
.headfont {
margin-left: 320px;
}
textarea {
margin-left: 30px;
width: 450px;
height: 150px;
}
var f,text,submt,m,s
window.onload= function (){
f = document.getElementById('test')
text = document.getElementById('text')
submt = document.getElementById('submt')
text.onkeyup = function bb(){ //按下键盘出发函数bb()
s = 150-text.value.length //获取文本框值得长度减去最大值 得到剩余值
m = "你还可以输入"
f.innerHTML=m + s //插入span文字
if (s<0) {
f.innerHTML= "超出了" + (-s) + "字" //-s是取正数
}
console.log(s)
}
submt.onclick = function cc() {
if (s<0){ //小于0代表以及输入超过了。
alert("输入超过了限制，只能输入150个字")
f.innerHTML= "超出了" + (-s) + "字"
text.focus() //让文本框获得鼠标焦点。
}else if (text.value.length==0) {
alert("请输入文字输入")
text.focus()
}else {
alert("发布成功") //如果刚刚好 就代表发布成功
}
}
}
<div class="wb_input">
<div class="contentxt">
<div class="heads">
<span class="headimg"></span>
<span class="headfont" id="test">你还可以输入150</span>个字</div>
<textarea name="" id="text"></textarea>
<ul>
<li>图片</li>
<li>表情</li>
<li>地点</li>
</ul>
<input name="" id="submt" type="submit" value="发布">
</div>
</div>总结
知道了 直接可以调用的语法 对象.事件 = function函数（）
知道了利用js的if简单的判断用户输入的内容。
批改老师：灭绝师太批改时间：2019-03-19 09:07:41
老师总结：代码上交不全面 , 下次提交的时候注意哦!
