Как я могу использовать JQuery для перехвата каждый раз, когда пользователь меняет цифру в поле ввода на моей странице?

Я новичок в JavaScript и JQuery, и у меня следующая ситуация, здесь JSFiddle: https://jsfiddle.net/AndreaNobili/eemrb8xo/3/

Итак, как видите, в HTML у меня есть это поле ввода:

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

Тогда у меня есть этот код JQuery:

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

    });
});

Итак, как вы можете видеть в предыдущем JSFiddle, когда пользователь изменяет значение внутри поля ввода, анонимная функция обратного вызова объявляется внутри функции change (), и выполняется предупреждение.

Хорошо, это работает.

Таким образом, пользователь может изменить значения двумя способами:

  1. Использование стрелок вверх и вниз: когда я нажимаю стрелку, всплывающее окно с предупреждением отображается правильно.

  2. Изменение значения, вставка нового числа во входной тег (запись его).

В этом втором случае функция анонимного обратного вызова, кажется, вызывается только тогда, когда пользователь завершил вставку нового номера и щелкнул мышью вне поля ввода. Я думаю, что это стандартное поведение функции JQuery change ().

Мне нужно, чтобы эта функция вызывалась каждый раз, когда пользователь вставляет новую цифру в поле ввода, а не только тогда, когда он вставил весь номер и щелкнул мышью за пределами поля ввода.

Могу ли я получить такое поведение? Что я могу сделать?


javascript html jquery jquery-events
person AndreaNobili    schedule 17.12.2015    source источник
comment
Попробуйте onkeyup событие ...   -  person Rayon    schedule 17.12.2015
comment
@RayonDabre Нет, это чистое событие JavaScript, и это не событие JQuery, поэтому оно не применимо к объекту JQuery.   -  person AndreaNobili    schedule 17.12.2015
comment
В jQuery вы можете использовать $(elem).on('keyup') или $(elem).keyup(). Простой поиск в Google решил бы эту проблему, но вы скорее сосредоточились на том, что применимо, а что нет :(   -  person Rayon    schedule 17.12.2015
comment
Также см.: stackoverflow.com/questions/3940258/   -  person Rayon    schedule 17.12.2015

Ответы (2)


arrow_upward
1
arrow_downward

Используйте событие Jquery key up, и вы получите нужный результат.

$ (документ) .ready (функция () {

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

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

});

});

person Sravan    schedule 17.12.2015
comment
Этот способ отлично работает, когда я вручную вставляю новое значение внутри ввода, но не когда я использую стрелку для его изменения. Я думаю, что bind () лучше - person AndreaNobili; 17.12.2015
comment
Хорошо, но я думаю, что оба работают одинаково. Нет проблем, используйте тот, который больше подходит для ваших требований .. :-) - person Sravan; 17.12.2015

arrow_upward
0
arrow_downward

keyup событие создает много шума. Я бы предложил использовать input и _ 3_ событий.

person Kaspars Primaks    schedule 17.12.2015