onchange เหตุการณ์สำหรับประเภทอินพุต =“ จำนวน”

ฉันจะจัดการกับการเปลี่ยนแปลงสำหรับ<input type="number" id="n" value="5" step=".5" />? ฉันไม่สามารถทำkeyupหรือkeydownเพราะผู้ใช้อาจใช้ลูกศรเพื่อเปลี่ยนค่า ฉันต้องการจัดการทุกครั้งที่มีการเปลี่ยนแปลงไม่ใช่แค่เบลอซึ่งฉันคิดว่า.change()เหตุการณ์นั้น ความคิดใด ๆ ?

ใช้ mouseup และ keyup

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

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

oninputเหตุการณ์ ( .bind('input', fn)) ครอบคลุมการเปลี่ยนแปลงใด ๆ จากการกดแป้นพิมพ์เพื่อลูกศรคลิกและวางแป้นพิมพ์ / เมาส์ แต่ไม่ได้รับการสนับสนุนใน IE <9

jQuery(function($) {
  $('#mirror').text($('#alice').val());

  $('#alice').on('input', function() {
    $('#mirror').text($('#alice').val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="alice" type="number" step="any" value="99">

<p id="mirror"></p>

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());
});​

นี่เป็นสลัมเล็กน้อย แต่วิธีนี้คุณสามารถใช้เหตุการณ์ "คลิก" เพื่อจับภาพเหตุการณ์ที่ทำงานเมื่อคุณใช้เมาส์เพื่อเพิ่ม / ลดโดยใช้ลูกศรเล็ก ๆ บนอินพุต คุณสามารถดูว่าฉันได้สร้างรูทีน "การตรวจสอบการเปลี่ยนแปลง" ด้วยตนเองเพียงเล็กน้อยซึ่งทำให้แน่ใจว่าตรรกะของคุณจะไม่เริ่มทำงานเว้นแต่ค่าจะเปลี่ยนไปจริง ๆ (เพื่อป้องกันผลบวกที่ผิดพลาดจากการคลิกง่าย ๆ บนฟิลด์)

ในการตรวจจับเมื่อกดเมาส์หรือคีย์คุณยังสามารถเขียน:

$(document).on('keyup mouseup', '#your-id', function() {                                                                                                                     
  console.log('changed');
});

$(':input').bind('click keyup', function(){
    // do stuff
});

การสาธิต: http://jsfiddle.net/X8cV3/

เพราะ$("input[type='number']")ไม่ได้ทำงานใน IE ที่เราควรจะใช้ชื่อชั้นเรียนหรือ id, $('.input_quantity')ตัวอย่างเช่น

และอย่าใช้.bind()วิธี. .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>

อาจมีทางออกที่ดีกว่า แต่นี่คือสิ่งที่อยู่ในใจ:

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/

ฉันใช้ประเภทอินพุตที่ซ่อนอยู่เพื่อเป็นที่เก็บของค่าก่อนหน้าซึ่งจำเป็นสำหรับการเปรียบเทียบในการเปลี่ยนแปลงครั้งต่อไป

ฉันมีปัญหาเดียวกันและฉันแก้ไขโดยใช้รหัสนี้

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/