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

다음을 포함하여 여러 가지 방법으로 값을 <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);

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

이 코드를 어딘가에 추가하면 트릭이 수행됩니다.

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

jQuery 에서 val ()이 change ()를 트리거하지 않는 이 솔루션을 찾았습니다.

샘플을 만들었습니다. 그것이 당신을 위해 작동 할 수 있습니다.

var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;

var oldData = $("p.content").html();
$('#tyingBox').keydown(function () {
    clearTimeout(typingTimer);
    if ($('#tyingBox').val) {
        typingTimer = setTimeout(function () {
            $("p.content").html('Typing...');
        }, doneTypingInterval);
    }
});

$('#tyingBox').keyup(function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function () {
        $("p.content").html(oldData);
    }, finaldoneTypingInterval);
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>

http://jsfiddle.net/utbh575s/

실제로 자바 스크립트 변경을 감지하기 위해 루프를 설정할 필요가 없습니다. 우리는 이미 감지하려는 요소에 많은 이벤트 리스너를 설정했습니다. 유해하지 않은 이벤트 만 트리거하면 작업이 수행됩니다.

$("input[name='test-element']").on("propertychange change click keyup input paste blur", function(){
console.log("yeh thats worked!");
});

$("input[name='test-element']").val("test").trigger("blur");

그리고 ofc는 프로젝트에서 자바 스크립트 변경을 완전히 제어 할 수있는 경우에만 사용할 수 있습니다.

글쎄, 가장 좋은 방법은 당신이 직접 세 가지 기지를 다루는 것입니다. 간단한 : onblur, : onkeyup 등은 원하는대로 작동하지 않으므로 결합하십시오.

KeyUp은 처음 두 개를 다루어야하며 Javascript가 입력 상자를 수정하는 경우 자신의 Javascript가되기를 바랍니다. 따라서 수정하는 함수에 콜백을 추가하십시오.

다음은 자동 완성 변형을 구현하기 위해 jqueryui 선택기 (목록)를 채우는 데 사용하는 실제 예제입니다. 그러나 드롭 다운 메뉴를 수행하는 jqueryui 자동 완성과 똑같이 작동하고 싶지 않습니다.

$("#tagFilter").on("change keyup paste", function() {
     var filterText = $("#tagFilter").val();
    $("#tags").empty();
    $.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
        function(data) {
            var i;
            for (i = 0; i < data.length; i++) {
                var tag = data[i].value;
                $("#tags").append("<li class=\"tag\">" + tag + "</li>");
            }
        }); 
});

장난이 아닙니다! (어쨌든 요즘은 쓸모가 없습니다)

편집 : HTML 이벤트를 제거했습니다. HTML 이벤트를 사용하지 마십시오 ... 대신 Javascript 이벤트 리스너를 사용하십시오.

document.querySelector("#testInput").addEventListener("input", test);

function test(e) {
 var a = document.getElementById('output');
 var b = /^[ -~]+$/;
 if (e.target.value == '' || b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. Yes";
 } else if (!b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. No";
 }
}

Try pressing Alt+NumPad2+NumPad3 in the input, it will instantly detect a change, whether you Paste, Type, or any other means, rather than waiting for you to unselect the textbox for changes to detect.

<input id="testInput">
<br>
<a id="output">Text is Ascii?.. Yes</a>

<span contenteditable="true" spellcheck="false">대신에 요소를 사용할 수는 없습니다.<input type="text"> ?

<span>( contenteditable="true" spellcheck="false"속성으로) <input>주로 다음 과 같은 이유로 구별됩니다 .

• 그것은 같은 스타일이 아닙니다 <input> .
• 그것은이없는 value속성을하지만, 텍스트로 렌더링됩니다innerText 하고 내 몸의 일부를합니다.
• <input>속성을 설정하더라도 여러 줄이지 만 그렇지 않습니다 multiline="true".

외관을 달성하기 위해 CSS에서 스타일을 지정할 수 있지만 값을 innerText 을 지정하는 한편 이벤트에 사용할 수 .

여기 바이올린이 있습니다.

불행히도 IE와 Edge에서 실제로 작동하지 않는 항목이 있는데 찾을 수 없습니다.

이 질문은 10 년 전에 게시되었지만 여전히 일부 개선이 필요하다고 생각합니다. 그래서 여기 내 해결책이 있습니다.

$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
    // Do something here
});

이 솔루션의 유일한 문제는 값이 javascript와 같이 변경되면 트리거되지 않는다는 것 $('selector').val('some value')입니다. javascript에서 값을 변경하면 선택기에 이벤트를 발생시킬 수 있습니다.

$(selector).val('some value');
// fire event
$(selector).trigger('change');

이 예를보고 관심있는 이벤트를 선택하십시오.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>evetns</title>
</head>
<body>
<form>
    <input class="controlevents" id="i1" type="text" /><br />
    <input class="controlevents" id="i2" type="text" /><br />
    <input class="controlevents" id="i3" type="text" /><br />
    <input class="controlevents" id="i4" type="text" /><br />
    <input class="controlevents" id="i5" type="text" /><br />
</form>
<div id="datatext"></div>
</body>
</html>
<script>
$(function(){

function testingevent(ev){
    if (ev.currentTarget.tagName=="INPUT")
        $("#datatext").append("<div>id : " + ev.currentTarget.id + ", tag: " + ev.currentTarget.tagName + ", type: "+ ev.type +"</div>");
}   

    var eventlist = ["resizeend","rowenter","dragleave","beforepaste","dragover","beforecopy","page","beforeactivate","beforeeditfocus","controlselect","blur",
                    "beforedeactivate","keydown","dragstart","scroll","propertychange","dragenter","rowsinserted","mouseup","contextmenu","beforeupdate",
                    "readystatechange","mouseenter","resize","copy","selectstart","move","dragend","rowexit","activate","focus","focusin","mouseover","cut",
                    "mousemove","focusout","filterchange","drop","blclick","rowsdelete","keypress","losecapture","deactivate","datasetchanged","dataavailable",
                    "afterupdate","mousewheel","keyup","movestart","mouseout","moveend","cellchange","layoutcomplete","help","errorupdate","mousedown","paste",
                    "mouseleave","click","drag","resizestart","datasetcomplete","beforecut","change","error","abort","load","select"];

    var inputs = $(".controlevents");

    $.each(eventlist, function(i, el){
        inputs.bind(el, testingevent);
    });

});
</script>

여기 파티에 늦을 수도 있지만 jQuery가 제공하는 .change () 이벤트를 사용할 수는 없습니다.

당신은 같은 것을 할 수 있어야합니다 ...

$(#CONTROLID).change(function(){
    do your stuff here ...
});

항상 다음과 같은 컨트롤 목록에 바인딩 할 수 있습니다 ...

var flds = $("input, textarea", window.document);

flds.live('change keyup', function() {
    do your code here ...
});

라이브 바인더는 현재와 미래에 페이지에 존재하는 모든 요소가 처리되도록합니다.

이것은 가장 빠르고 깨끗한 방법입니다.

Jquery를 사용하고 있습니다.

$('selector').on('change', function () {
    console.log(this.id+": "+ this.value);
});

그것은 나를 위해 꽤 잘 작동합니다.