입력 유형="숫자"에 대한 변경 이벤트

입력 유형="숫자"에 대한 변경 이벤트

다음에 대한 변경 사항을 처리하려면 어떻게 해야 합니까?<input type="number" id="n" value="5" step=".5" />나는 할 수 없습니다.keyup또는keydown사용자가 화살표를 사용하여 값을 변경할 수 있기 때문입니다.나는 그것이 바뀔 때마다 그것을 처리하고 싶다, 내 생각에 블러뿐만 아니라..change()이벤트는 합니다.아이디어 있어요?

마우스를 위로 이동하고 키를 위로 이동합니다.

$(":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']").bind("focus", function() {
    var value = $(this).val();
    $(this).bind("blur", function() {
        if(value != $(this).val()) {
            alert("Value changed");
        }
        $(this).unbind("blur");
    });
});

OR

$("input[type='number']").bind("input", function() {
    alert("Value changed");
});

왜냐면$("input[type='number']")IE에서 작동하지 않습니다. 예를 들어 클래스 이름이나 ID를 사용해야 합니다.$('.input_quantity').

사용 안 함.bind()방법. 그.on()method는 이벤트 핸들러를 문서에 첨부할 때 선호되는 방법입니다.

제 버전은 다음과 같습니다.

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 코드로 호출하기만 하면 됩니다.

<input type="number" onchange="onChangeFunction(this.value)">

더 나은 해결책이 있을 수 있지만 다음과 같이 생각했습니다.

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

세 줄의 첫 번째 줄만 추가할 수 있고 나머지 부분은 선택 사항입니다.

$('#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/

언급URL : https://stackoverflow.com/questions/9609731/onchange-event-for-input-type-number