इनपुट प्रकार = "संख्या" के लिए ऑनकॉन्ग इवेंट

Question 1

मैं किस प्रकार एक onchange को संभाल सकता हूँ <input type="number" id="n" value="5" step=".5" />? मैं keyupया तो नहीं कर सकता keydown, क्योंकि, उपयोगकर्ता मान बदलने के लिए केवल तीरों का उपयोग कर सकता है। मैं इसे संभालना चाहूंगा जब भी यह बदलेगा, न कि केवल धब्बा पर, जो मुझे लगता है कि .change()घटना करता है। कोई विचार?

Question 2

माउसअप और कीअप का उपयोग करें

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

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

Question 3

oninputघटना ( .bind('input', fn)) तीर क्लिक और कुंजीपटल / माउस पेस्ट करने के लिए कीस्ट्रोक्स से किसी भी परिवर्तन को शामिल किया गया है, लेकिन आईई <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>

स्निपेट का विस्तार करें

Question 4

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

यह थोड़ा सा यहूदी बस्ती है, लेकिन इस तरह से आप "क्लिक" घटना का उपयोग उस घटना को पकड़ने के लिए कर सकते हैं जो इनपुट पर छोटे तीरों के माध्यम से वृद्धि / घटने के लिए माउस का उपयोग करता है। आप देख सकते हैं कि मैंने थोड़ा मैनुअल "चेंज चेक" रूटीन में कैसे बनाया है जो सुनिश्चित करता है कि आपके तर्क में आग नहीं लगेगी जब तक कि मूल्य वास्तव में बदल नहीं जाता है (क्षेत्र पर साधारण क्लिक से झूठी सकारात्मकता को रोकने के लिए)।

Question 5

यह पता लगाने के लिए कि माउस या कुंजी को कब दबाया जाता है, आप यह भी लिख सकते हैं:

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

Question 6

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

डेमो: http://jsfiddle.net/X8cV3/

Question 7

क्योंकि $("input[type='number']")IE पर काम नहीं करता है, हमें एक वर्ग नाम या आईडी का उपयोग करना चाहिए, उदाहरण के लिए $('.input_quantity'),।

और .bind()विधि का उपयोग न करें । .on()विधि एक दस्तावेज़ में ईवेंट हैंडलर्स संलग्न के लिए पसंदीदा तरीका है।

तो, मेरा संस्करण है:

एचटीएमएल

<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>

Question 8

एक बेहतर समाधान हो सकता है, लेकिन यह वही है जो मन में आया:

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

यहाँ एक कार्यशील उदाहरण है ।

यह बस एक घटना हैंडलर को बांधता है keyup, changeऔर clickघटनाओं को। यह जाँचता है कि मूल्य बदल गया है या नहीं, और यदि ऐसा है, तो वर्तमान मूल्य को संग्रहीत करता है ताकि यह अगली बार फिर से जाँच कर सके। clickघटना से निपटने के लिए चेक की आवश्यकता होती है ।

Question 9

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

Question 10

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

मैंने पिछले मूल्य के कंटेनर होने के लिए एक छिपे हुए इनपुट प्रकार का उपयोग किया है जिसे अगले बदलाव पर तुलना के लिए आवश्यक होगा।

Question 11

मुझे एक ही समस्या थी और मैंने इस कोड का उपयोग करके हल किया

एचटीएमएल

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