jQuery：在 keydown 处理程序中获取新值答案

【问题标题】：jQuery: Getting new value in keydown handlerjQuery：在 keydown 处理程序中获取新值
【发布时间】：2013-08-09 12:00:43
【问题描述】：

我遇到了这个问题：onKeyPress Vs. onKeyUp and onKeyDown，从那里我发现keypress 应该在文本输入中输入字符时触发。我正在尝试运行以下代码。它应该在其文本长度超过 0 时使输入的背景变为黄色，或者在它为 0 时使输入的背景变为白色。我无法使其工作。如果我尝试做keydown，我会遇到以下问题：

如果我只输入一个字符然后松开，背景仍然是白色。
如果是这样，我按backspace，从而清除那个字符，它变成黄色（与我想要的相反！）。如果我现在按任何其他键（Alt,Shift），它会再次变白。事实上，如果我输入一个字符而不是Alt 或Shift，它仍然是白色的，这让我们回到第一个问题。
如果我键入按一个字符键并按住它，第一个字符的背景将保持白色，然后从第二个字符开始变为黄色。

如果我只尝试keyup，这些就是问题（如预期的那样）：

只要按住按键，背景就不会改变，即使在空输入中添加了一个字符或删除了整个文本。

如果我尝试keypress，我会遇到与keydown 相同的问题，即使它应该可以工作。

如果我为 keyup、keydown 和 keypress 绑定 3 个处理程序（上帝我绝望了！），几乎所有问题都解决了，除了 keydown 的问题 3：如果我键入按字符键并保持按下后，第一个字符的背景保持白色，从第二个字符开始变为黄色。

我该如何解决这个问题？

JS：

$(document).ready(function() {

    $("input").bind("keydown", function() {
        if ($(this).val().length == 0) {
            $(this).css('background', 'white');
        } else {
            $(this).css('background', 'yellow');
        }
    });

    $("input").bind("keypress", function() {
        if ($(this).val().length == 0) {
            $(this).css('background', 'white');
        } else {
            $(this).css('background', 'yellow');
        }
    });

    $("input").bind("keyup", function() {
        if ($(this).val().length == 0) {
            $(this).css('background', 'white');
        } else {
            $(this).css('background', 'yellow');
        }
    });

});

HTML：

<input type='text' />

【问题讨论】：

标签： javascript jquery keypress keydown keyup

【解决方案1】：

当keydown事件触发时，字符还没有写入输入框。

我做了一些研究，建议使用timeout 以获得您想要的行为。显然，在微小的延迟期间，会触发输入上的 change 事件，然后 .val() 返回新内容。

这是一个有效的代码：

$(document).ready(function () {
    var field = $("input");

    field.on("keydown", function (e) {
        setTimeout(function () {
            if (field.val().length == 0) {
                field.css('background', 'white');
            } else {
                field.css('background', 'yellow');
            }
        }, 1);
    });
});

伴随着jsFiddle

【讨论】：

正是我所担心的！我讨厌计时器！多汁的内存泄漏方式.. :(
嗯，它很臭，但这是你唯一的选择。即使是 jQuery-UI 自动完成功能也是如此。
哦，他们有吗？呵呵，那我估计真的没办法了！如果 John Resig 找不到解决方法，我对此很好.. :) 非常感谢！
+1 - 这几乎让我发疯了 2 个小时！然后我意识到keydown上的事件处理程序一定有一些笨拙。感谢和赞誉！
我在 iOS Safari 上遇到了问题，在调用 setTimeout 回调时输入的值被可靠地设置了。将延迟时间从 1 毫秒提高到 10 毫秒就可以了，但似乎很笨拙。我尝试侦听更改事件，但在输入失去焦点之前它不会被触发。但是，它确实会在设置值后触发 keyup 事件。我正在使用field.one('keyup', function() { ... }); 而不是上面的setTimeout，它似乎工作正常。在这里摆弄：jsfiddle.net/5RWbH/29

【解决方案2】：

虽然这是一个旧帖子，但我也遇到了同样的问题。在没有计时器的情况下实现此目的的最佳方法是使用 input 事件：

$('#inputText').on('input', function() {
      const inputText = $(this).val()
      console.log(inputText)
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" class="form-control" id="inputText">
</div>

【讨论】：