按键后jQuery获取输入值

Question

我有以下功能:

$(document).ready(function() {
    $("#dSuggest").keypress(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

出于某种原因,对于第一个按键,我得到一个空字符串到控制台日志.

Answer 1

意识到这是一个相当古老的帖子,无论如何我会提供一个答案,因为我正在努力解决同样的问题.

您应该使用该"input"事件,并使用该.on方法注册.这很快 - 没有滞后keyup并解决了您描述的丢失的最新按键问题.

$('#dSuggest').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

在这里演示

Answer 2

这是因为keypress事件被触发之前,新的角色加入到value该元素的(所以第一个keypress被添加的第一个字符之前触发事件,而value仍然是空的).你应该使用keyup,在添加角色后触发.

请注意,如果您的元素#dSuggest相同,则input:text[name=dSuggest]可以大大简化此代码(如果不是,则使用名称id与另一个元素相同的元素不是一个好主意).

$('#dSuggest').keypress(function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

Answer 3

使用.keyup而不是按键.

也可以使用$(this).val()或仅this.value访问当前输入值.

DEMO在这里

有关信息.keypress从jQuery的文档,

当浏览器注册键盘输入时,按键事件将发送到元素.这类似于keydown事件,除了密钥重复的情况.如果用户按下并按住键,则会触发一次keydown事件,但会为每个插入的字符触发单独的按键事件.此外,修饰键(如Shift)会触发keydown事件,但不会触发keypress事件.

Answer 4

我一直在寻找一个 ES6 示例（这样它可以通过我的 linter）所以对于其他正在寻找相同示例的人：

$('#dSuggest').keyup((e) => {
    console.log(e.currentTarget.value);
});

我还会使用 keyup，因为您可以获得填充的当前值。

Answer 5

您必须中断执行线程以允许输入更新.

  $(document).ready(function(event) {
       $("#dSuggest").keypress(function() {
           //Interrupt the execution thread to allow input to update
               setTimeout(function() {
                   var dInput = $('input:text[name=dSuggest]').val();
                   console.log(dInput);
                   $(".dDimension:contains('" + dInput + "')").css("display","block");
               }, 0);
       });
  });