Question

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

我要求他返回字符数，而不必手动增加变量。为什么退格键在正常工作之前会先我的变量一次递增？

？

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

您的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();
    }
});

Answer 2

在退格的情况下，在添加或删除字母之前会触发Keydown。使用keyup代替keydown。

侦听器按键按下：退格键和字段长度

2 个答案: