事件驱动编程:注册输入更改

Question

我对html，css和javascript非常陌生，所以请不要对我太苛刻。我正在处理一个请求的活动:注册updateCount事件处理程序来处理文本区域标记的输入更改。注意:此函数统计文本区中的字符数。目前为止的Javascript如下所示-

var textareaElement = document.getElementById("userName");
function updateCount(event) {
document.getElementById("stringLength").innerHTML = event.target.value.length;
}

// Write code here

我完全不知道它在这个问题上要求我做什么。在线资源和教科书都不是很有帮助。

HTML不能以任何方式改变，迫使我只需要改变javascript就可以解决它。HTML如下所示-

<label for="userName">User name:</label>
<textarea id="userName" cols="40" rows="3"></textarea><br>
<p id="stringLength">0</p>

任何帮助都将不胜感激，我只是在努力学习。

Answer 1

尝尝这个。在<textarea>标记上添加onkeyup事件，然后将event.target替换为textareaElement以获取该值

​

var textareaElement = document.getElementById("userName");
function updateCount() {
    document.getElementById("stringLength").innerHTML = textareaElement.value.length;
}

<label for="userName">User name:</label>
<textarea id="userName" onkeyup="updateCount()" cols="40" rows="3"></textarea><br>
<p id="stringLength">0</p>

​

Answer 2

当您有一个对DOM节点的引用(例如，<textarea>)时，您可以为它支持的各种事件绑定事件处理程序。在本例中，我们查阅HTMLTextAreaElement docs并了解到以下JS片段将给出文本长度

 const textarea = document.getElementById('userName');
 const length = textarea.value.length; // textarea.textLength;

然后，我们将参考docs来确定我们想要绑定到的是input事件。

 textarea.addEventListener('input', updateCount);

您的updateCount将输入event作为输入，其中还包含对事件目标(即textarea )的引用。

Answer 3

var textareaElement = document.getElementById("userName");

    function textSize(event) {
       document.getElementById("stringLength").innerHTML = event.target.value.length;
    }
      textareaElement.addEventListener("input", function(event){
      document.getElementById("stringLength").innerHTML = event.target.value.length;

   });