js微博输入案列和总结

Original 2019-01-10 00:36:43 221
abstract:首先获取用户触发字段长度,根据开发者设定的数量减去用户输入的字段长度,求出还剩多少可输入字段,在用js中innerHtml在页面渲染出来,在同理去判断按钮是否根据这样可否让用户去点击去禁用,都可以实现,完成用户在页面体验html:<div class="text"> <div class="text_top">还可以输入<s

首先获取用户触发字段长度,根据开发者设定的数量减去用户输入的字段长度,求出还剩多少可输入字段,在用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('发布成功')

}

}

}


Correcting teacher:天蓬老师Correction time:2019-01-10 08:51:22
Teacher's summary:console.log(num) , 以后提交的作业 中, 可以把这些语句删除掉

Release Notes

Popular Entries