为何4-3编程练习经常不灵

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>输入文本</title>

<style type="text/css">

</style>

</head>

<body>

<p class="text">字数限制在30字内，<span id="tip">您还可以输入<b id="count">30</b> 字</span></p>

<textarea cols="50" rows="7" id="text"></textarea>

<script type="text/javascript">

// 获取文本框

var total=30;

var text=document.getElementById("text");

var count=document.getElementById("count");

var tip=document.getElementById("tip");

// 绑定键盘事件

document.onkeypress=function(){

var len=text.value.length;

if(len<=30){

var allow=total-len;

count.innerHTML=allow;

}else{

var left=len-30;

tip.innerHTML="您已经超出"+left+"字";

}

</script>

</body>

</html>

有时候第一次输入可以，刷新后就无法动了，在作业提交那里键盘输入没反应，代码是不是那里有问题？？？

还有个问题就是我删除字符的时候，到 “字数限制在30字内，您已经超出1字”，这个时候就卡住了，这是为何？？？

OlafChou 2017-07-12

源自：JavaScript DOM事件 4-6 编程练习

收起

3回答

樱桃小胖子回答被采纳获得+3积分 2017-07-14 09:58:00

你好，因为超出之后，改变了html的结构，改变之后的html结构为：如下：

html：<p>字数限制在30字内，<span id="tip">"你已超出"+"<b>"+num2+"</b>"+"字";</span></p>

这时已经没有count元素了，所以会一直停留在超出，建议：给可改成如下形式；祝学习愉快！

先声明：

 var len=text.value.length;
 var num1=total-len;
 var num2=len-total;

if (len<=total) {
            tip.innerHTML="您还可以输入"+"<b>"+num1+"</b>"+"字";
          } 
          else{
            tip.innerHTML="你已超出"+"<b>"+num2+"</b>"+"字"; 
            console.log(num2);
          }
}

希望可以帮到你！

收起回答

OlafChou 提问者 #1

非常感谢！

2017-07-15 11:43:29

提问者 OlafChou 2017-07-13 06:51:52

为何onkeypress删除字数就不会动，onekeyup删除字数会动，这是啥原因

收起回答

樱桃小胖子 #1

这个跟这几个事件的触发执行有关，keydown事件发生在键盘的键被按下的时候，接下来触发keypress事件。 keyup 事件在按键被释放的时候触发。因此一般情况下常用keyup ，希望可以帮到你！

2017-07-13 13:07:13

怎么都被占用了呢 2017-07-12 10:33:12

代码有问题哦

收起回答

提问者 OlafChou #1

我的代码没问题啊，为何说有问题呢？？

2017-07-13 06:48:36
提问者 OlafChou #2

我把onkeypress改成onkeyup之后还是有问题

2017-07-13 06:49:47
樱桃小胖子回复提问者 OlafChou #3

测试了你的代码，将onkeypress改成onkeyup之后是可以的！

2017-07-13 13:04:21