Question

以下是按键功能的代码，仅允许数字 http://jsfiddle.net/lesson8/HkEuf/1/

但是，对于相同的密钥代码，密钥功能不起作用。我的意思是，如果我使用

$(document).ready(function () {
  //called when key is pressed in textbox
  $("#quantity").keyup(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
               return false;
    }
   });
});

使用keyup的原因是在文本框中获取当前输入的值。如果我使用keyup函数，我将获得当前值。但是，如果我使用keydown或keypress，我将获得文本框中的先前值或现有值查看具有不同功能的更新代码 http://jsfiddle.net/dgireeshraju/HkEuf/7300/ 这是keydown的示例，它给出了现有值。

Answer 1

仅在插入字符后才会触发

<a href="#" title="This is a tooltip">Tooltips</a> <script> $(function() { $( document ).tooltip({ position: { my: "center bottom-20", at: "center top", using: function( position, feedback ) { $( this ).css( position ); $( "<div>" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); }); </script> <style> .ui-tooltip, .arrow:after { background: #efefef; color:red; border:2px solid #000; width: 400px; } .ui-tooltip { padding: 10px 20px; color: white; border-radius: 20px; font: bold 14px "Helvetica Neue", Sans-Serif; text-transform: uppercase; box-shadow: 0 0 7px black; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow.top { top: -16px; bottom: auto; } .arrow.left { left: 20%; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: auto; } </style>，因为您可以看到您的函数实际上正在调用并显示警告消息。

如果您使用KeyUp尝试相同的代码，它将起作用，因为在插入字符之前将调用该事件

KeyDown

Answer 2

在用户释放密钥后，在执行该密钥＆gt;的默认操作后，键入火警。

当插入实际字符时，键盘会触发，例如，对于＆gt;实例，文本输入。当用户按下键时，它会重复。

Your code is actaully working in both the cases (you can see the error message atleast )但由于此事件不同，结果也是如此。要使其与keyup一起使用，您需要再次清空输入元素，因为到那时该值已经输入到输入元素中

   $("#quantity").keyup(function (e) {
    //if the letter is not digit then display error and don't type anything
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $(this).val(''); //<--- this will empty the value in the input.
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
        return false;
    }
});

注意：但是，即使有数字，清空输入也会删除完整的值，所以在这种情况下我更喜欢keydown。

<强>更新

这对输入值有点破解但是（我仍然希望使用keydown），如果你真的想让keyup工作，请使用它:)。因为我正在修改默认的浏览器行为，所以你可能还需要考虑很多其他案例。

$("#quantity").keyup(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
    //display error message
     if(e.which != 13){ //<--- don't remove when entered is pressed.
        $(this).val(e.currentTarget.value.substr(0, e.currentTarget.value.length - 1));
    }
    $("#errmsg").html("Digits Only").show().fadeOut("slow");
    return false;
}
console.log(e.currentTarget.value);

});

working fiddle

jquery keypress（）事件不适用于keyup（）

2 个答案: