Always check the value within an input

Question

Currently I have this, if the value is between 35 and 49 then show a message:

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

The only issue is the input value isn't checked until I have clicked off the input. I need the value to be checked as the input value is updated. I've tried keyup and keypress instead of change but it didn't seem to work, maybe I did it wrong (probably!). Any help here would be greatly appreciated!

Thank you!

add function not only for change event but also for keyup https://api.jquery.com/keyup/ — SpiRT, Sep 04 '18 at 17:05
please see this question and answer for best approach https://stackoverflow.com/questions/21642758/jquery-keyup-detect-paste-text-from-input but do not use bind - use "on" — SpiRT, Sep 04 '18 at 17:06

score 1 · Answer 1 · answered Sep 04 '18 at 17:10

I would try to use document ready with keyup like this

$(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/

score 0 · Answer 2 · answered Sep 04 '18 at 17:16

There are several ways to change input value. 1. Keypress 2. Paste

In first case it is better to track "change" and "keyup"(when you already know the pressed key and can do some calculations). In second case you have to track "input" event.

https://jsfiddle.net/ym3ukx54/

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

score 0 · Answer 3 · answered Sep 04 '18 at 17:17

You need to use input event instead of change because this event is fired synchronously when the value is changed.

Instead to add or remove class you may use .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>

score 0 · Answer 4 · answered Sep 04 '18 at 18:29

Let jQuery handle the number and you don't have to deal with the parseInt function unless "37a" or "40 years" are considered valid numbers here (could be).

.change() is like .blur(), that it doesn't trigger until loss of focus and then only with a change of value.

.keyup() reacts to the release of any key while the field has focus.

.input() is good too, but it's more useful if you want to react to sticky keys or people falling asleep on the keyboard or something like that because it catches numbers entered by keeping the button down as well.

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

Always check the value within an input

4 Answers4