событие onchange для типа ввода= " число"



как я могу обрабатывать onchange для <input type="number" id="n" value="5" step=".5" /> ? Я не могу сделать keyup или keydown, потому что пользователь может просто использовать стрелки, чтобы изменить значение. Я хотел бы обрабатывать его всякий раз, когда он меняется, а не только на размытие, которое я думаю .change() событие. Есть идеи?

638   10  

10 ответов:

используйте mouseup и keyup

$(":input").bind('keyup mouseup', function () {
    alert("changed");            
});

http://jsfiddle.net/XezmB/2/

The oninput событие (.bind('input', fn)) охватывает любые изменения от нажатия клавиш до щелчков стрелок и вставки клавиатуры/мыши, но не поддерживается в IE

http://jsfiddle.net/XezmB/8/

$(":input").bind('keyup change click', function (e) {
    if (! $(this).data("previousValue") || 
           $(this).data("previousValue") != $(this).val()
       )
   {
        console.log("changed");           
        $(this).data("previousValue", $(this).val());
   }

});


$(":input").each(function () {
    $(this).data("previousValue", $(this).val());
});​

Это немного гетто, но таким образом вы можете использовать событие "click", чтобы захватить событие, которое выполняется при использовании мыши для увеличения/уменьшения с помощью маленьких стрелок на входе. Вы можете видеть, как я построил небольшую ручную процедуру "change check", которая гарантирует, что ваша логика не сработает, если значение действительно не изменится (чтобы предотвратить ложные срабатывания от простых щелчков по полю).

чтобы определить, когда мышь или клавиша нажата, вы также можете написать:

$(document).on('keyup mouseup', '#your-id', function() {                                                                                                                     
  console.log('changed');
});
$(':input').bind('click keyup', function(){
    // do stuff
});

Demo:http://jsfiddle.net/X8cV3/

там может быть лучшим решением, но это то, что пришло на ум:

var value = $("#yourInput").val();
$("#yourInput").on('keyup change click', function () {
    if(this.value !== value) {
        value = this.value;
        //Do stuff
    }        
});

здесь пример работающего.

Он просто привязывает обработчик события к keyup,change и click событий. Он проверяет, изменилось ли значение, и если да, то сохраняет текущее значение, чтобы он мог проверить снова в следующий раз. Проверка необходима для того чтобы общаться с click событие.

$("input[type='number']").bind("focus", function() {
    var value = $(this).val();
    $(this).bind("blur", function() {
        if(value != $(this).val()) {
            alert("Value changed");
        }
        $(this).unbind("blur");
    });
});

или

$("input[type='number']").bind("input", function() {
    alert("Value changed");
});
<input type="number" id="n" value="0" step=".5" />
<input type="hidden" id="v" value = "0"/>

<script>
$("#n").bind('keyup mouseup', function () {
    var current = $("#n").val();
    var prevData = $("#v").val(); 
    if(current > prevData || current < prevData){
       $("#v").val(current);
       var newv = $("#v").val(); 
       alert(newv);
    } 
});  
</script>

http://jsfiddle.net/patrickrobles53/s10wLjL3/

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

, потому что $("input[type= 'number']") не работает на IE, мы должны использовать имя класса или ID, например, $('.input_quantity')

и не использовать .привязать() метод. Элемент .on () метод является предпочтительным методом для присоединения обработчиков событий для документа.

Итак, моя версия:

HTML

<input type="number" value="5" step=".5" min="1" max="999" id="txt_quantity" name="txt_quantity" class="input_quantity">

jQuery

<script>
$(document).ready(function(){
    $('.input_quantity').on('change keyup', function() {
        console.log('nice');
    }); 
});
</script>

у меня была такая же проблема, и я решил с помощью этого кода

HTML

<span id="current"></span><br>
<input type="number" id="n" value="5" step=".5" />

Вы можете добавить только 3 первые строки другие части не является обязательным.

$('#n').on('change paste', function () {
    $("#current").html($(this).val())   
});
// here when click on spinner to change value, call trigger change
$(".input-group-btn-vertical").click(function () {
   $("#n").trigger("change");
});
// you can use this to block characters non numeric
$("#n").keydown(function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || (e.keyCode === 65 && e.ctrlKey === true) || (e.keyCode >= 35 && e.keyCode <= 40)) 
           return;

    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) 
       e.preventDefault();
});

пример здесь:http://jsfiddle.net/XezmB/1303/

Comments

    Ничего не найдено.