侦听器钥匙down:backspace和字段长度

Question

我想知道为什么我的backspace触摸会增加我的countLetters变量。

我要求他返回角色数量，而无需手动增加变量。为什么backspace键会在正常工作之前添加我的变量？

const $textareas   = document.querySelectorAll('.js-textarea');
$textareas.forEach(function($textarea) {
  $textarea.addEventListener('keydown', function(event) {
    let max = 100;
    let countLetters = $textarea.value.length;
    let $meta = this.nextSibling.nextSibling; // = meta
    $meta.innerHTML = countLetters + ' / ' + max;
    if (countLetters >= max) {
      $textarea.value.toString().substring(0, max);
    }
    if (event.which != 46) {
      return;
    }
    // Disabled <textarea>
    if (countLetters >= max) {
      event.preventDefault();
    }
  });
});

演示可在此处的Codepen！

上使用

谢谢

Answer 1

在添加字母或删除的情况下，如果在靠背的情况下，键盘发射。使用keyup代替keydown。

Answer 2

在您的keydown处理程序运行后，更改文本区域的值。您可以改用input事件。

这是一个示例：

const max = 100;
$textarea.addEventListener('input', function() {
    const countLetters = $textarea.value.length;
    const $meta = this.nextSibling.nextSibling;
    $meta.innerHTML = countLetters + ' / ' + max;
});
$textarea.addEventListener('keydown', function(event) {
    if ($textarea.value.length >= max && event.key === 'Backspace') {
      event.preventDefault();
    }
});