js微博输入案列和总结
首先获取用户触发字段长度，根据开发者设定的数量减去用户输入的字段长度，求出还剩多少可输入字段，在用js中innerHtml在页面渲染出来，在同理去判断按钮是否根据这样可否让用户去点击去禁用，都可以实现，完成用户在页面体验
html：
<div class="text">
<div class="text_top">还可以输入<span class="number" id="number">20</span>个字</div>
<textarea class="text_textarea" id="textarea"></textarea>
<div class="text_bottom">
<div class="text_b1">表情</div>
<div class="text_b2">图片</div>
<div class="text_b3">视频</div>
<div class="text_b4">话题</div>
<div class="text_b5">微博</div>
<div class="text_b6">公开</div>
<button class="text_button" id="onclick">发布</button>
</div>
</div>
js:
window.onload=function(){
var number,text,button;
number=document.getElementById('number')
text=document.getElementById('textarea')
button=document.getElementById('onclick')
var num;
console.log(num)
text.onkeyup=function () {
num=20
num=num-text.value.length
console.log(num)
console.log(text.value.length)
if(num<0){
number.style.color="red"
}else{
number.style.color="black"
}
number.innerHTML=num;
}
button.onclick=function(){
if(num==20){
alert('您还没有输入')
text.focus()
}else if(num<0){
alert('您输入过多')
}else {
alert('发布成功')
}
}
}