按键按下事件在第一次按下时没有触发。

Question

我有这个方法：

$(".txtB").on("keypress", function(event) {
    console.log($(this).val());
    if (...)
        event.preventDefault();
});

但是它只在第二个按键之后才起作用，而不是在第一个按键时。之后每次按键都会触发。

有没有人知道可能是什么原因？

谢谢。

后续编辑： 这可能与我使用函数的方式有关吗？

在HTML中：onkeyup = "caseValuePercentageTwoDecimalRestriction()"

在JS中：

function caseValuePercentageTwoDecimalRestriction() {
    $(".caseValuePrecentageRestriction").on("keypress", function (event) {
        ...

??

- Jake Manet

---

如果输入的按键不是我想要的，我必须使用 "event.preventDefault();"，而不能使用 keyup。 - Jake Manet

你能在 jsfiddle 上复制你的问题吗？ - John R

Answer 1

$(".txtB").keyup(function (event) {
     console.log($(this).val());
});

回答你的问题，按键事件发生在输入更改之前。但是松开按键事件发生在更改之后。这是唯一的区别。

- Raja Sekar

Answer 2

错误是在keypress事件之后触发的keyup事件上调用caseValuePercentageTwoDecimalRestriction。

当你松开按键时，会触发keyup事件，而当你按下按键时，则会触发keypress事件。

你应该在document.ready事件上绑定你的keypress事件处理程序，像这样：

$(document).ready(function() {
    $(".caseValuePrecentageRestriction").on("keypress", function (event) {
        // do whatever you need
    });
});

- ADreNaLiNe-DJ

Answer 3

对于输入字段，还有一个属性input propertychange，它可以在键盘更改文本以及从鼠标复制时起作用。尝试使用它

$(".txtB").on("input propertychange", function(event) {
    console.log($(this).val());
    if (...)
        event.preventDefault();
});

- Gaurav Aggarwal

---

我遇到了相同的问题，在第一次按键时函数没有被触发。谢谢。 - Jake Manet

Answer 4

那么也许 .keydown 对你有用？

- Nick Surmanidze

Answer 5

keypress事件在新字符添加到输入框之前被触发。

因此，第一个keypress事件在第一个字符添加之前就被触发了，此时输入框仍为空。

如果您检查JSFIDDLE，您会在看到输入框中的值之前看到一个警报框。

例如，如果您最初键入a，您将看到一个空的警报框，然后键入另一个字符，此时您将看到它正在警报a

您需要使用keyup或keydown。您还可以在keyup和keydown中使用event.preventDefault()。

- brk

Answer 6

使用 keyup 而不是 keypress - 尝试：

$(".txtB").keyup(function (event) {
     console.log($(this).val());
});

- Dhara Parmar

---

有什么原因吗？ - Milind Anantwar

我不想在验证之前将密钥放入我的文本框中，我无法使用keyup。 - Jake Manet

Answer 7

下面开始：

你的代码必须像这样：

$("input").keypress(function(){
    $("span").text(i += 1);
    alert("Test key pres");
});

<input type="text">

<p>Keypresses: <span>0</span></p>

希望能有所帮助;)

- Husni Salax

Answer 8

这个方法可以解决你的问题，但并不是完美的解决方案，只是一个权宜之计：

$(document).ready(function(){
  $(".txtB").on("keypress", function (event) {
    console.log($(this).val() + event.key);
  });  
});

这里有一个jsbin

正如其他用户之前分享的，Keypress事件会在文本框的值改变之前触发。如果你想要更新后的文本框值，应该使用其他事件。

- Sachin

Answer 9

尝试使用change而不是keypress或keyup，因为它会首先调用：

$(".txtB").change(function(event){
     console.log($(this).val());
});  

- Vatsal Pathak