摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>weibo</title> <link rel="stylesheet" type="text/css"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>weibo</title>
<link rel="stylesheet" type="text/css" href="css/anli.css">
</head>
<body>
<div>
<img src="images/12.png"><div>还可以输入<span id="number"></span>字</div>
<textarea id="text"></textarea>
<span id="sp1">表情</span>
<span id="sp2">图片</span>
<span id="sp3">视频</span>
<span id="sp4">话题</span>
<span id="sp5">长微博</span>
<span id="sp6">公开</span>
<input type="button" value="发布" id="bt">
</div>
<script type="text/javascript">
var number,text,m;
window.onload=function (){
number=document.getElementById('number')
text=document.getElementById('text')
bt=document.getElementById('bt')
text.onkeyup=function textjc(){
m=140-text.value.length
if(m<0){
number.style.color="red"
}else{
number.style.color="#888"
}
number.innerHTML=m;
}
bt.onclick=function pulish_info(){
if(m==140){
alert('请输入文字')
}else if(m<0){
alert('请输入字数规范内的文字')
}else{
alert('发布成功')
}
}
}
// textjc();
</script>
</body>
</html>首先获取到输入栏标签和输入传值显示标签和提交确认标签
然后给传入值设置一个最大值。使得控制可输入最大字符长度。
然后给一个判断,当字数超过时,字数提示数字变红。
然后给提交标签一个判断,使得确认不同事件响应的不同反馈。
PS:老师教的这个判断有个问题,当我没输入任何字段的时候,m值还未初始化的情况下。m是为空的,这样就可以在未输入任何字符的情况下回馈提交成功,请问老师这个问题可以如何解决吗?
批改老师:灭绝师太批改时间:2018-11-07 08:53:00
老师总结:可以再做一个判断,没有输入字符不允许提交,也可以通过正则