摘要：.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(){     //按下鍵盤出發(fā)函數(shù)bb()
   	s = 150-text.value.length    //獲取文本框值得長度減去最大值 得到剩余值
   	m = "你還可以輸入" 
   	f.innerHTML=m + s    //插入span文字
   	if (s<0) {
   	f.innerHTML= "超出了" + (-s) + "字"   //-s是取正數(shù)
   	} 
   	console.log(s)
  }
  submt.onclick = function cc() {
  if (s<0){                  //小于0代表以及輸入超過了。
  alert("輸入超過了限制，只能輸入150個(gè)字")
  f.innerHTML= "超出了" + (-s) + "字" 
  text.focus()   //讓文本框獲得鼠標(biāo)焦點(diǎn)。
  }else if  (text.value.length==0) {
  alert("請輸入文字輸入")
  text.focus()
  }else {

  alert("發(fā)布成功")    //如果剛剛好 就代表發(fā)布成功
  }
  }

   }
<div class="wb_input">

  <div class="contentxt">
  <div class="heads">
<span class="headimg"></span>
<span class="headfont" id="test">你還可以輸入150</span>個(gè)字</div>
  <textarea name="" id="text"></textarea> 
  <ul>
  <li>圖片</li>
  <li>表情</li>
  <li>地點(diǎn)</li>
  </ul>
  <input name="" id="submt" type="submit" value="發(fā)布">
  </div>
</div>

總結(jié)

知道了 直接可以調(diào)用的語法  對象.事件 = function函數(shù)（）

知道了利用js的if簡單的判斷用戶輸入的內(nèi)容。

批改老師：滅絕師太批改時(shí)間：2019-03-19 09:07:41
老師總結(jié)：代碼上交不全面 , 下次提交的時(shí)候注意哦!