6

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

  1. 如果我只输入一个字符然后放开，背景仍然是白色的。

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

  3. 如果我键入按一个字符键并按住它，第一个字符的背景保持白色，然后第二个字符变为黄色。

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

  1. 只要按住按键，背景就不会改变，即使将字符添加到空输入或删除整个文本也是如此。

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

如果我为 和 绑定 3 个处理程序keyup，keydown并且（天哪，keypress我很绝望！），几乎所有问题都解决了，除了问题 3keydown第 2 个字符起。

我该如何解决这个问题？

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' />
4

2 回答 2

11

触发 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

于 2013-08-07T22:38:43.480 回答
0

虽然这是一个旧帖子，但我遇到了同样的问题。在没有计时器的情况下实现此目的的最佳方法是使用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>

于 2021-08-14T21:04:19.333 回答