[jquery] 입력 유형 =“number”에 대한 onchange 이벤트

Program / 글쓴이

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)) 클릭 및 키보드 / 마우스 페이스트, 화살표 키 입력에서 변경 사항을 포함하지만, <9 IE에서 지원되지 않습니다.

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이벤트 를 처리하려면 확인이 필요합니다 .