How can I use JQuery to intercept each time that the user change a digit inside an input field on my page?

Question

I am pretty new in JavaScript and JQuery and I have the following situation, here the JSFiddle: https://jsfiddle.net/AndreaNobili/eemrb8xo/3/

So, as you can see, in the HTML I have this input field:

<input id="variazioneAnticipo" class="rightAlligned form-control" style="width: 60%" type="number" step="0.01" min="0" value="3" />

Then I have this JQuery code:

$(document).ready(function() {
    $("#variazioneAnticipo").change(function() {
        var variazioneAnticipo = $("#variazioneAnticipo").val();
        alert("CHANGED VALUE, NEW VALUE: " + variazioneAnticipo);

    });
});

So, as you can see in the previous JSFiddle, when the user change the value inside the input field the anonymous callback function declared inside change() function and an alert is performed.

Ok, this works.

So the user can change the values in 2 ways:

Using the up and down arrow: when I click the arrow the alert popup is correctly shown.
Changing the value inserting a new number insid the input tag (writing it).

In this second case the anonymous callback function seems to be call only when the user have finisched the insertion of the new number and click out of the input field. I think that this is the standard behavior of the JQuery change() function.

I need that this function is called each time the user insert a new digit inside the input field and not only when it have inserted the entire number and click out of the input field.

Can I obtain this behavior? What can I do?

@RayonDabre No this is a pure JavaScript event and this is not a JQuery event so it is not applicable to a JQuery object — AndreaNobili, Dec 17 '15 at 10:30
In jQuery, you can use `$(elem).on('keyup')` or `$(elem).keyup()`. A simple google search would have solved this issue but you rather focused on what is applicable and what is not :( — Rayon, Dec 17 '15 at 10:33
Also refer: http://stackoverflow.com/questions/3940258/what-events-does-an-input-type-number-fire-when-its-value-is-changed — Rayon, Dec 17 '15 at 10:39

score 1 · Accepted Answer · answered Dec 17 '15 at 10:27

1

$(document).ready(function() {
    $("#variazioneAnticipo").bind('change keyup', function() {
        var variazioneAnticipo = $("#variazioneAnticipo").val();
        alert("CHANGED VALUE, NEW VALUE: " + variazioneAnticipo);

    });
});

answered Dec 17 '15 at 10:27

Covik

746
6
15

score 1 · Answer 2 · answered Dec 17 '15 at 10:33

1

Use the Jquery key up event and you will get the result you needed.

$(document).ready(function() {

$("#variazioneAnticipo").keyup(function() {

    var variazioneAnticipo = $("#variazioneAnticipo").val();
    alert("ANTICIPO VARIATO: " + variazioneAnticipo);

});

});

answered Dec 17 '15 at 10:33

Sravan

18,467
3
30
54

In this way works fine when I manually insert a new value inside the input but not when I use the arrow to modify it. I think that bind() is better – AndreaNobili Dec 17 '15 at 10:36
Okay, but I think both are working in the same way.No problem use the one which suits better to your requirement..:-) – Sravan Dec 17 '15 at 10:48

score 0 · Answer 3 · answered Dec 17 '15 at 10:40

0

keyup event creates a lot of noise. I would suggest to use input and propertychange events.

answered Dec 17 '15 at 10:40

Kaspars Primaks

82
1
5

How can I use JQuery to intercept each time that the user change a digit inside an input field on my page?

3 Answers3