jQuery 按键后jQuery获取输入值

jQuery get input value after keypress

提问by Or Weinberger

I have the following function:

我有以下功能：

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

For some reason, for the first keypress, I'm getting an empty string to the console log.

出于某种原因，对于第一次按键，我在控制台日志中得到一个空字符串。

回答by Frederik Gottlieb

Realizing that this is a rather old post, I'll provide an answer anyway as I was struggling with the same problem.

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

You should use the "input"event instead, and register with the .onmethod. This is fast - without the lag of keyupand solves the missing latest keypress problem you describe.

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

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

Demo here

演示在这里

回答by lonesomeday

This is because keypressevents are fired beforethe new character is added to the valueof the element (so the first keypressevent is fired before the first character is added, while the valueis still empty). You should use keyupinstead, which is fired afterthe character has been added.

这是因为keypress事件被触发之前，新的角色加入到value该元素的（所以第一个keypress事件是第一个字符之前解雇加入，而value仍是空的）。您应该keyup改用它，它会在添加角色后触发。

Note that, if your element #dSuggestis the same as input:text[name=dSuggest]you can simplify this code considerably (and if it isn't, having an element with a name that is the same as the idof another element is not a good idea).

请注意，如果您的元素#dSuggest与您的元素相同，则input:text[name=dSuggest]可以大大简化此代码（如果不是，则元素的名称id与另一个元素的名称相同并不是一个好主意）。

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

回答by Selvakumar Arumugam

Use .keyupinstead of keypress.

使用.keyup代替按键。

Also use $(this).val()or just this.valueto access the current input value.

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

DEMOhere

演示在这里

Info about .keypressfrom jQuery docs,

信息关于.keypress从jQuery的文档，

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except in the case of key repeats. If the user presses and holds a key, a keydown event is triggered once, but separate keypress events are triggered for each inserted character. In addition, modifier keys (such as Shift) trigger keydown events but not keypress events.

当浏览器注册键盘输入时，keypress 事件被发送到一个元素。这类似于 keydown 事件，除了键重复的情况。如果用户按住某个键，则会触发一次 keydown 事件，但会为每个插入的字符触发单独的 keypress 事件。此外，修饰键（例如 Shift）会触发 keydown 事件，但不会触发 keypress 事件。

回答by parliament

You have to interrupt the execution thread to allow the input to update.

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

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

回答by yogihosting

This is because Keypressevent is fired before the new character is added. Use 'keyup' event instead,which will work perfectly in your situation.

这是因为Keypress在添加新角色之前触发了事件。改用“keyup”事件，这将在您的情况下完美运行。

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

I want to add to this, if you have many textboxes and you have to do the same thing on their keyup event you can simply give them a common css class(eg commoncss) and apply keyup event like this.

我想补充一点，如果你有很多文本框并且你必须在他们的 keyup 事件上做同样的事情，你可以简单地给他们一个通用的 css 类（例如 commoncss）并像这样应用 keyup 事件。

$(document).ready(function() {
    $(".commoncss").keyup(function() {
        //your code
    });
});

this will greatly reduce you code as you don't have to apply keyup event by id for each textboxes.

这将大大减少您的代码，因为您不必按 id 为每个文本框应用 keyup 事件。

回答by MarvinVK

I was looking for a ES6 example (so it could pass my linter) So for other people who are looking for the same:

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

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

I would also use keyup because you get the current value that is filled in.

我也会使用 keyup，因为您会得到填充的当前值。

回答by Smonge

Just use a timeout to make your call; the timeout will be called when the event stack is finished (i.e. after the default event is called)

只需使用超时即可拨打电话；当事件堆栈完成时（即调用默认事件后）将调用超时

$("body").on('keydown', 'input[type=tel]', function (e) {
    setTimeout(() => {
        formatPhone(e)
    }, 0)
});

回答by Developer

jQuery get input value after keypress

按键后jQuery获取输入值

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

i = 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
}); 

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery keyup() Method By Tutsmake Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Enter something: <input type="text">  
<p>Keypresses val count: <span>0</span></p>  
</body>  
</html>  

回答by Zuckerberg

I think what you need is the below prototype

我认为你需要的是下面的原型

$(element).on('input',function(){code})