Javascript事件目标值显示输入框的先前值

Question

我有一个包含多行输入文本框的网格。我正在尝试动态计算/显示每行文本框的当前位置和剩余字符数（每个文本框最多可以是 100 个字符）

$("#mygrid tbody").on('focusin', function(e) {
    if (e.target.tagName.toLowerCase() === 'input') {                
        let currentPosition = e.target.value.length === 0 ? 1 : e.target.value.length + 1;
        let remainingCharacters = 100 - e.target.value.length;
    }
});

$("#mygrid tbody").on('keydown', function(e) {
    if (e.target.tagName.toLowerCase() === 'input') {       
        console.log("e.target.selectionStart : " + e.target.selectionStart);
        console.log("e.target.value : " + e.target.value);
        let currentPosition = e.target.selectionStart + 1;
        let remainingCharacters = 100 - e.target.value.length;      
    }
});

我看到的是，控制台日志语句显示有 1 个键的延迟，即当用户逐个键输入“123”时，记录的内容如下；

e.target.selectionStart : 2
e.target.value : 12

我很困惑为什么会发生这种情况？

Answer 1

回答具体问题

事件显示输入框的先前值

我很困惑为什么会发生这种情况

发生的情况是：当用户按下某个键时，事件会在输入更新之前keydown触发- 这允许您在输入中不需要时取消该键。

如果您使用了keyup它，它将在输入更新后触发，并且您的remainingCharacters代码将按预期工作。

正如另一个答案中已经建议的那样， usinginput是一个很好的包罗万象并且适合您的场景（因此这里不再重复代码）。

我想解释为什么会发生这种情况，这是其他解决方案所缺少的。