[javascript] JQuery를 사용하여 <input type =“text”>의 모든 변경 사항을 즉시 감지

JAVASCRIPT / 글쓴이

다음을 포함하여 여러 가지 방법으로 값을 <input type="text">변경할 수 있습니다.

  • 키 누르기
  • 복사 붙여 넣기
  • JavaScript로 수정
  • 브라우저 또는 툴바에 의해 자동 완성

JavaScript 함수가 변경 될 때마다 (현재 입력 값으로) JavaScript 함수를 호출하고 싶습니다. 그리고 입력이 포커스를 잃을 때가 아니라 바로 호출되기를 원합니다.

모든 브라우저 에서이 작업을 수행하는 가장 깨끗하고 강력한 방법을 찾고 있습니다 (바람직하게 jQuery 사용).

답변

이 jQuery 코드는 모든 요소를 ​​즉시 변경하며 모든 브라우저에서 작동합니다.

 $('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

답변

jQuery를위한 실시간 고급 솔루션> = 1.9

$("#input-id").on("change keyup paste", function(){
    dosomething();
})

“클릭”이벤트도 감지하려면 다음을 수행하십시오.

$("#input-id").on("change keyup paste click", function(){
    dosomething();
})

jQuery <= 1.4를 사용 live하는 경우 대신을 사용하십시오 on.

답변

불행히도, 나는 setInterval이 상을받는 다고 생각한다 :

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

단 한 줄의 코드로 가장 깨끗한 솔루션입니다. 또한 input가치를 얻을 수있는 모든 다른 이벤트 / 방법에 대해 걱정할 필요가 없기 때문에 가장 강력 합니다.

이 경우 ‘setInterval’을 사용하는 단점은 적용되지 않는 것 같습니다.

  • 100ms 대기 시간? 많은 응용 분야에서 100ms는 충분히 빠릅니다.
  • 브라우저에로드를 추가 했습니까? 일반적으로 페이지에 중량이 많은 setInterval을 많이 추가하는 것은 좋지 않습니다. 그러나이 특별한 경우에는 추가 된 페이지로드를 감지 할 수 없습니다.
  • 많은 입력으로 확장되지 않습니까? 대부분의 페이지에는 소수의 입력이 많지 않으므로 동일한 setInterval에서 모두 스니핑 할 수 있습니다.

답변

oninput이벤트에 바인딩하는 것은 대부분의 정상적인 브라우저에서 제대로 작동하는 것 같습니다. IE9도 지원하지만 구현은 버그가 있습니다 (문자를 삭제할 때 이벤트가 시작되지 않음).

jQuery 버전 1.7 이상 on에서이 메소드는 다음과 같이 이벤트에 바인딩하는 데 유용합니다.

$(".inputElement").on("input", null, null, callbackFunction);

답변

2017 답변 : 입력 이벤트 는 IE8보다 최신 버전에 대해 정확하게 수행합니다.

$(el).on('input', callback)

답변

안타깝게도 기준에 맞는 이벤트 또는 이벤트 세트가 없습니다. 키 누르기와 복사 / 붙여 넣기는 모두 keyup이벤트 로 처리 할 수 ​​있습니다 . JS를 통한 변경은 더 까다 롭습니다. 텍스트 상자를 설정하는 코드를 제어 할 수 있다면 가장 좋은 방법은 텍스트 상자에서 함수를 직접 호출하거나 사용자 이벤트를 트리거하도록 수정하는 것입니다.

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

해당 코드를 제어 할 수없는 경우 setInterval()텍스트 상자를 ‘감시’하여 변경 사항을 확인할 수 있습니다 .

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

이러한 종류의 능동적 모니터링은 업데이트를 ‘즉시’포착하지는 않지만 지각 할 수있는 지연이 없을 정도로 빠른 것 같습니다. DrLouie가 의견에서 지적 했듯이이 솔루션은 많은 입력을보아야 할 경우 확장 성이 떨어질 수 있습니다. 항상 두 번째 매개 변수를 조정하여 setInterval()더 자주 또는 덜 자주 점검 할 수 있습니다 .

답변

다른 답변을 좋아하지 않으면 약간 다른 해결책이 있습니다. 

var field_selectors = ["#a", "#b"];
setInterval(function() {
  $.each(field_selectors, function() {
    var input = $(this);
    var old = input.attr("data-old-value");
    var current = input.val();
    if (old !== current) {
      if (typeof old != 'undefined') {
        ... your code ...
      }
      input.attr("data-old-value", current);
    }
  }
}, 500);

컨텍스트 메뉴 붙여 넣기를 캡처하기 위해 클릭 및 키업에 의존 할 수 없다고 생각하십시오.