如何在按键事件后获得jquery .val() ?

时间:2020-11-30 20:27:18

I got:

我有:

$(someTextInputField).keypress(function() {
  alert($(this).val());
});

Now the alert always returns the value BEFORE the keypress (e.g. the field is empty, I type 'a' and the alert gives me ''. Then I type 'b' and the alert gives me 'a'...). But I want the value AFTER the keypress - how can I do that?

现在,警报总是在按键前返回值(例如,字段是空的,我键入“a”,而警报给了我)。然后我输入“b”,警报就会告诉我“a”……。但是我想要按键后的值——我怎么做呢?

Background: I'd like to enable a button as soon as the text field contains at least one character. So I run this test on every keypress event, but using the returned val() the result is always one step behind. Using the change() event is not an option for me because then the button is disabled until you leave the text box. If there's a better way to do that, I'm glad to hear it!

背景:当文本字段包含至少一个字符时,我希望启用一个按钮。所以我在每个按键事件上运行这个测试,但是使用返回的val(),结果总是落后一步。使用change()事件对我来说不是一个选项,因为在您离开文本框之前,该按钮将被禁用。如果有更好的办法,我很高兴听你这么说!

6 个解决方案

#1


129  

Change keypress to keyup:

改变按键弹起键盘按键:

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypress is fired when the key is pressed down, keyup is fired when the key is released.

按键按下时触发,按键释放时触发。

#2


50  

Surprised that no one mentioned the js "input" event:

奇怪的是没有人提到js“输入”事件:

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

Recommended.

推荐。

https://developer.mozilla.org/en-US/docs/Web/Events/input

https://developer.mozilla.org/en-US/docs/Web/Events/input

#3


8  

instead of keypress, use keyup.

使用keyup而不是keypress。

#4


4  

Alternatively, you can use the keydown event with a timeout of 0.

或者,也可以使用超时为0的keydown事件。

That way, the changes will be applied instantly, instead of being applied when the user stops holding the key.

这样,更改将立即应用,而不是在用户停止持有密钥时应用。

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});

#5


3  

You may want to hook up an onchange event handler instead of using any of the key events.

您可能希望连接onchange事件处理程序,而不是使用任何键事件。

$(someTextInputField).change(function() {
    alert($(this).val());
});

Using Edit > Paste or a Right-Click then Paste will fire a change event, but not a key event. Note some browsers may simulate a key event on a paste (though I don't know of any) but you can't count on that behavior.

使用编辑>粘贴或右键单击粘贴将触发一个更改事件,但不是一个键事件。注意,有些浏览器可能会在粘贴上模拟一个关键事件(尽管我不知道有),但您不能依赖该行为。

#6


3  

Try something like this:

试试这样:

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

That simply introduces a timeout so that after the "keypress" event loop completes, your code will run almost immediately thereafter. Such a short timer interval (even if rounded up by the browser) will not be noticeable.

这只会引入一个超时,以便在“按下键”事件循环完成之后,您的代码几乎会立即运行。如此短的计时器间隔(即使浏览器将其四舍五入)将不会被注意到。

edit — or you could use "keyup" like everybody else says, though its semantics are different.

编辑——或者你也可以像其他人一样使用“keyup”,尽管它的语义不同。

#1


129  

Change keypress to keyup:

改变按键弹起键盘按键:

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypress is fired when the key is pressed down, keyup is fired when the key is released.

按键按下时触发,按键释放时触发。

#2


50  

Surprised that no one mentioned the js "input" event:

奇怪的是没有人提到js“输入”事件:

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

Recommended.

推荐。

https://developer.mozilla.org/en-US/docs/Web/Events/input

https://developer.mozilla.org/en-US/docs/Web/Events/input

#3


8  

instead of keypress, use keyup.

使用keyup而不是keypress。

#4


4  

Alternatively, you can use the keydown event with a timeout of 0.

或者,也可以使用超时为0的keydown事件。

That way, the changes will be applied instantly, instead of being applied when the user stops holding the key.

这样,更改将立即应用,而不是在用户停止持有密钥时应用。

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});

#5


3  

You may want to hook up an onchange event handler instead of using any of the key events.

您可能希望连接onchange事件处理程序,而不是使用任何键事件。

$(someTextInputField).change(function() {
    alert($(this).val());
});

Using Edit > Paste or a Right-Click then Paste will fire a change event, but not a key event. Note some browsers may simulate a key event on a paste (though I don't know of any) but you can't count on that behavior.

使用编辑>粘贴或右键单击粘贴将触发一个更改事件,但不是一个键事件。注意,有些浏览器可能会在粘贴上模拟一个关键事件(尽管我不知道有),但您不能依赖该行为。

#6


3  

Try something like this:

试试这样:

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

That simply introduces a timeout so that after the "keypress" event loop completes, your code will run almost immediately thereafter. Such a short timer interval (even if rounded up by the browser) will not be noticeable.

这只会引入一个超时,以便在“按下键”事件循环完成之后,您的代码几乎会立即运行。如此短的计时器间隔(即使浏览器将其四舍五入)将不会被注意到。

edit — or you could use "keyup" like everybody else says, though its semantics are different.

编辑——或者你也可以像其他人一样使用“keyup”,尽管它的语义不同。