Question

所以我面临一个奇怪的问题。我的javascript代码的一部分是一个函数不起作用，但是当我在转到chrome中的源代码后放置断点并单击文件时，断点开始工作，我的Javascript函数运行完美。（我可以看到输出。）这是我的代码。请告诉我为什么要面对这个问题？

HTML code .....

<textarea type="text" class="input-content" onchange="count(this)"></textarea>
<p class="character-count"></p>

的Javascript

function count(char){
char.onkeyup = function () { 
        var text_max = 99;
        var text_length = this.value.length;
        var text_remaining = text_max - text_length;
        char.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max;
  }
}

Answer 1

您正在onchange中分配keyup事件处理程序。这是行不通的，因为在离开现场之前，onchange不会触发。在焦点上执行此操作但不添加新的事件处理程序（如果已有）。

注意我删除了内联事件处理程序，这不是一个好习惯。我循环，因为我假设您可能有多个要添加计数器的字段。

＆＃13;

function count(){
  if (!this.onkeyup) this.onkeyup = function () { 
        var text_max = 99;
        var text_length = this.value.length;
        var text_remaining = text_max - text_length;
        this.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max;
  }
}
window.onload=function() {
  var msgs = document.querySelectorAll(".input-content");
  for (var i=0;i<msgs.length;i++) {
     msgs[i].onfocus=count;
  }
}

＆＃13;

<div><textarea type="text" class="input-content"></textarea>
<p class="character-count"></p>
</div>

＆＃13;

你可以自己完成所有这些onkeyup

＆＃13;

window.onload=function() {
  var msgs = document.querySelectorAll(".input-content");
  for (var i=0;i<msgs.length;i++) {
     msgs[i].onkeyup=function () { 
        var text_max = 99;
        var text_length = this.value.length;
        var text_remaining = text_max - text_length;
        this.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max;
    };
  }
}

＆＃13;

<div><textarea type="text" class="input-content"></textarea>
<p class="character-count"></p>
</div>

＆＃13;

Answer 2

onchange事件在您离开textarea（它失去焦点）之前不会被触发。

您还在更改时错误地添加了keyup事件处理程序。所以发生的事情是，每次你解开textarea的时候，你都要替换keyup处理程序。

我认为你想要的只是在元素上使用onkeyup，如下所示：

function count(textareaElement){
        var text_max = 99;
        var text_length = textareaElement.value.length;
        var text_remaining = text_max - text_length;
        textareaElement.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max;

}

<textarea type="text" class="input-content" onkeyup="count(this)"></textarea>
<p class="character-count"></p>

Javascript无法正常工作，但在放置断点并从chrome调试工具中单击该文件时工作正常

2 个答案: