始终检查输入中的值

Question

目前我有这个，如果值在35到49之间，那么显示一条消息：

$(window).load(function() {
    $("#amountInput").change(function(){
       if(parseInt(this.value) > 34 && parseInt(this.value) < 50) {
           $(".amountMessage").addClass("show");
       } else {
           $(".amountMessage").removeClass("show");
       }
   })
});

唯一的问题是在我点击输入之前不会检查输入值。我需要在输入值更新时检查值。我已经尝试过keyup和keypress而不是改变但它似乎没有用，也许我做错了（可能！）。这里的任何帮助将不胜感激！

谢谢！

Answer 1

我会尝试使用像这样的密钥的文件准备

$(document).ready(function(){
    $("#amountInput").on('keyup', function(){
            if(parseInt(this.value) > 34 && parseInt(this.value) < 50) {
           $(".amountMessage").addClass("show");
       } else {
           $(".amountMessage").removeClass("show");
       }
    });
})

https://jsfiddle.net/kjgnq4L1/8/

Answer 2

有几种方法可以改变输入值。 1. Keypress 2.粘贴

在第一种情况下，最好跟踪“更改”和“键盘”（当您已经知道按下的键并且可以进行一些计算时）。在第二种情况下，您必须跟踪“输入”事件。

https://jsfiddle.net/ym3ukx54/

$('input').on("change keyup input",function() { 
    $('div').show();
});

Answer 3

您需要使用input event而不是更改，因为在更改值时会同步触发此事件。

而不是添加或删除类，您可以使用.toggleClass( className, state )

$("#amountInput").on('input', function(e){
    var state = parseInt(this.value) > 34 && parseInt(this.value) < 50;    
    $(".amountMessage").toggleClass("show", state);
})

$("#amountInput").on('input', function(e){
    var state = parseInt(this.value) > 34 && parseInt(this.value) < 50;    
    $(".amountMessage").toggleClass("show", state);
})

.amountMessage {
    display: none;
}
.show {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="amountInput" type="text">
<div class="amountMessage">Here I am</div>

Answer 4

让jQuery处理数字，你不必处理parseInt函数，除非“37a”或“40年”在这里被视为有效数字（可能）。

.change（）类似于.blur（），它只有在失去焦点后才会触发，然后才会更改值。

当字段具有焦点时，.keyup（）会对任何键的释放做出反应。

.input（）也很好，但是如果你想对粘键或者在键盘上睡着的人做出反应或类似的东西，它会更有用，因为它通过保持按钮按下来捕获输入的数字。

$("#amountInput").keyup(function(){
    $(".amountMessage").toggleClass("show", ($(this).val() > 35 && $(this).val() < 50));
});