Question

我想要一个文本计数器，它会立即计算textarea中的字符并在textarea_feedback中显示它们。

理想情况下，它会计数到160，然后当它达到160时，它会回到0并再次开始计数。

到目前为止，我已经得到了这个，这是行不通的

document.addEventListener('load', function() {
  document.getElementById('textarea').onkeyup = function () {
  document.getElementById('textarea_feedback').innerHTML = "Characters left: " + (500 - this.value.length);
  };
})

Answer 1

第一行不起作用。

删除document.addEventListener('load', function()，然后将代码放在<body>。

的末尾

＆＃13;

function updateText () {
      feedback.innerHTML = "Characters left: " + (500 - textArea.value.length);
  };

var textArea = document.getElementById('textarea'),
    feedback = document.getElementById('textarea_feedback');

textArea.onkeyup = function(){ updateText() };
textArea.onpaste = function(){ updateText() };

＆＃13;

<textarea id="textarea"></textarea>
<div id="textarea_feedback"></div>

＆＃13;

Answer 2

这个怎么样？使用余数运算符将允许您从0开始。load事件在window对象上触发而不在document上。

＆＃13;

window.addEventListener("load", function(){
  document.getElementById('textarea').onkeyup = function () {
    var charsLeft = 160 - this.value.length % 160;
    document.getElementById('textarea_feedback').innerHTML = "Characters left: " + charsLeft;
  };
});

＆＃13;

<textarea id="textarea"></textarea>
<div id="textarea_feedback"></div>

＆＃13;

Answer 3

使用input事件通过粘贴，撤消，自动填充等捕获输入值的所有更改：

var input = document.getElementById('textarea'),
    feedback = document.getElementById('textarea_feedback');

input.addEventListener('input', event => {
  var remaining = 160 - (event.target.value.length % 160);
  feedback.textContent = `${remaining} characters remaining`;
});

<textarea id="textarea"></textarea>
<div id="textarea_feedback"></div>

我想要一个文本计数器在我的页面上工作而不使用jquery？

3 个答案: