在keydown事件上对textfield中的字符进行计数

Question

我希望在用户输入时更新在文本字段中输入的字符数量。我不会太过分。这就是我到目前为止所拥有的。它变为零。我对javascript很新，对初学者的解释会很棒。

＆＃13;

＆＃13;

function doThis() {
  x = document.getElementById("area").textContent;
  y = x.length;
  document.getElementById("demo").innerHTML = y;
}

＆＃13;

<textarea id="area" onkeydown="doThis()"></textarea>
<p id="demo">Count goes here</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

要获取textarea使用.value的内容，请将活动更改为onkeyup。

function doThis() {
  x = document.getElementById("area").value;
  y = x.length;
  document.getElementById("demo").innerHTML = y;
}

<textarea id="area" onkeyup="doThis()"></textarea>
<p id="demo">Count goes here</p>

Answer 2

代替textcontent使用value，如果您想使用keydown，请添加+1

＆＃13;

＆＃13;

function doThis() {
  x = document.getElementById("area").value;
  y = x.length + 1;
  document.getElementById("demo").innerHTML = y;
}

＆＃13;

<textarea id="area" onkeydown="doThis()"></textarea>
<p id="demo">Count goes here</p>

＆＃13;

＆＃13;

＆＃13;

注意：如果你复制并粘贴它会给你错误的结果，所以最好使用onkeyup

Answer 3

使用.querySelector()和更少代码的替代答案：

document.querySelector('#area').onkeyup = function() {
  document.querySelector('#demo').innerHTML = this.value.length;
}

<textarea id="area"></textarea>
<p id="demo">Count goes here</p>