(즉시)을 사용하여 JQuery와 에서의 모든 변경을 감지

해결법

1.이 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
       ....
     }
   });
 });

2.> = 1.9 jQuery를위한 실시간 멋진 솔루션

> = 1.9 jQuery를위한 실시간 멋진 솔루션
```
$("#input-id").on("change keyup paste", function(){
    dosomething();
})
```
당신은 또한 감지 할 경우, 이벤트를 그냥 "클릭"
```
$("#input-id").on("change keyup paste click", function(){
    dosomething();
})
```
당신이 <= 1.4 jQuery를 사용하는 경우, 단지 대신에의 라이브 사용합니다.
3.불행하게도, 나는 setInterval을이 상을 수상 생각 :

불행하게도, 나는 setInterval을이 상을 수상 생각 :
```
<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>
```
그것은 코드의 한 라인에서 가장 깨끗한 솔루션입니다. 당신이 입력 값을 얻을 수있는 모든 다른 이벤트 / 방법에 대해 걱정할 필요가 없기 때문에 그것은 또한 가장 강력한입니다.

'하여 setInterval'를 사용하는 단점이 경우에는 적용하지 않는 것 :
4.oninput 이벤트에 바인딩 가장 제정신 브라우저에서 잘 작동 보인다. IE9도를 지원하지만 구현은 버그 (문자를 삭제할 때 이벤트가 발생하지 않음)입니다.

oninput 이벤트에 바인딩 가장 제정신 브라우저에서 잘 작동 보인다. IE9도를 지원하지만 구현은 버그 (문자를 삭제할 때 이벤트가 발생하지 않음)입니다.

jQuery를 버전 1.7+ 방법에 대한이 같은 이벤트에 바인드에 유용합니다 :
```
$(".inputElement").on("input", null, null, callbackFunction);
```
5.2017 대답 : 입력 이벤트가 IE8보다 최신 아무것도 정확히이 일을합니다.

2017 대답 : 입력 이벤트가 IE8보다 최신 아무것도 정확히이 일을합니다.
```
$(el).on('input', callback)
```
6.불행하게도 어떤 이벤트 나 당신의 기준과 일치하는 이벤트 세트가 없습니다. 키 누름과 두 KeyUp 이벤트로 처리 할 수 있습니다 복사 / 붙여 넣기. JS를 통해 변경이 까다 있습니다. 당신은 텍스트 상자가, 가장 좋은 건 직접 함수를 호출하거나 텍스트 상자에 사용자 이벤트를 트리거하기 위해 수정하는 설정하는 코드를 제어 할 수있는 경우 :

불행하게도 어떤 이벤트 나 당신의 기준과 일치하는 이벤트 세트가 없습니다. 키 누름과 두 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 ()의 두번째 매개 변수를 조정할 수 있습니다.

7.당신이 다른 답변의 공상하지 않은 경우 여기에 약간 다른 솔루션입니다 :

당신이 다른 답변의 공상하지 않은 경우 여기에 약간 다른 솔루션입니다 :

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

당신이 캡처 컨텍스트 메뉴의 붙여 넣기를 클릭하고의 keyup에 의존 할 수 있음을 고려하십시오.

8.이 코드 어딘가에 추가,이 트릭을 할 것입니다.

이 코드 어딘가에 추가,이 트릭을 할 것입니다.

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를에서) (발에이 솔루션을 찾을 수

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

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

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/

10.우리는 실제로 자바 스크립트 변화를 감지하기위한 설정 루프에 필요하지 않습니다. 우리는 이미 우리가 감지 할 요소에 많은 이벤트 리스너를 설정. 바로 일을 할 것입니다 어떤 않은 유해 이벤트를 트리거.

우리는 실제로 자바 스크립트 변화를 감지하기위한 설정 루프에 필요하지 않습니다. 우리는 이미 우리가 감지 할 요소에 많은 이벤트 리스너를 설정. 바로 일을 할 것입니다 어떤 않은 유해 이벤트를 트리거.
```
$("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 당신은 당신의 프로젝트에 자바 스크립트 변경에 대한 모든 권한이있는 경우.
11.음, 가장 좋은 방법은 직접 열거 된 세 개의 기지를 커버하는 것입니다. 간단한 : 위해 onblur는 : onKeyUp에, 등, 그래서 그냥 그들을 결합, 당신이 원하는 것을 위해 작동하지 않습니다.

음, 가장 좋은 방법은 직접 열거 된 세 개의 기지를 커버하는 것입니다. 간단한 : 위해 onblur는 : onKeyUp에, 등, 그래서 그냥 그들을 결합, 당신이 원하는 것을 위해 작동하지 않습니다.

그래서 그냥 수정을하는 함수에서 콜백을 추가의 keyup 처음 두 커버해야하고, 자바 스크립트가 입력 상자를 수정하는 경우, 물론 나는 확실히 당신의 자신의 자바 스크립트를 바랍니다.
12.이 질문에 10 년 전에 게시되었지만, 나는 여전히 개선이 필요하다고 생각합니다. 그래서 여기 내 솔루션입니다.

이 질문에 10 년 전에 게시되었지만, 나는 여전히 개선이 필요하다고 생각합니다. 그래서 여기 내 솔루션입니다.
```
$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
    // Do something here
});
```
이 솔루션을 가진 유일한 문제는 값이 $ ( '선택')와 같은 자바 스크립트에서 변경하는 경우는하지 않습니다 트리거입니다. 발 ( '일부 값'). 당신이 자바 스크립트에서 값을 변경할 때 당신은 당신의 선택에 어떤 이벤트가 발생 할 수 있습니다.
```
$(selector).val('some value');
// fire event
$(selector).trigger('change');
```
13.NO JQUERY! (그것 어쨌든 요즘 오래된 벽돌 쌓는)

NO JQUERY! (그것 어쨌든 요즘 오래된 벽돌 쌓는)

여기에 이벤트 리스너를 사용하여 비 ASCII 검출기이다

경우 "입력"을 사용하면 변화의 어떤 종류도 찾아보실 수 있습니다 :

삭제, 백 스페이스, 붙여 넣기, 입력하면, 입력 값을 변경합니다 아무것도.

입력 이벤트는 직접 텍스트 입력의 세터 관련이있다. 텍스트가 어떤 방식으로 변경 될 때마다, 입력이 전달됩니다.

document.querySelector ( "# testInput") 또는 addEventListener ( "입력"시험).; document.querySelector ( "# 1 testInputLocked") 또는 addEventListener ( "입력"을 testLocked).; 기능 테스트 (E) { VAR document.getElementById를 A = ( '출력'); 경우 (e.target.value == ''|| / ^ [- ~]. + $ / 테스트 (e.target.value)) { a.innerText = "ASCII : 사실"; } 다른 경우 (/ ^! [- ~]. + $ / 테스트 (e.target.value)) { a.innerText = "ASCII : 거짓"; } } testLocked 함수 (E) { e.target.value = e.target.value.replace (/ [^ - ~] + / g ''); } 입력에서 Alt + NumPad2 + NumPad3를 눌러보십시오, 그것은 바로, 당신이 붙여 넣기 여부, 유형, 또는 다른 방법을 변화를 감지, 오히려 당신이 변화를 감지하기위한 텍스트 상자의 선택을 취소하기 위해 기다리는 것보다. 로
로
<입력 ID = "testInput"> ASCII : 사실 를 로
로
모든 비 ASCII를 ASCII로 잠그고 교체를 원하십니까? 로
14.여기에 내가 자동 완성 변화 채우는 jqueryui 선택 (목록)를 구현하기 위해 사용하고있는 잘 동작하는 예제입니다,하지만 난 정확히 jqueryui 자동 완성 드롭 다운 메뉴를 수행하는 등의 기능을 원하지 않는다.

여기에 내가 자동 완성 변화 채우는 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>");
            }
        }); 
});
```
15.당신은 단순히이 같은 형태의 모든 체인저를 식별 할 수 있습니다

당신은 단순히이 같은 형태의 모든 체인저를 식별 할 수 있습니다
```
           //when form change, show aleart
            $("#FormId").change(function () {
                aleart('Done some change on form');
            }); 
```
16.당신은 단지 <입력 유형 = "텍스트"> 대신에 <스팬의 contentEditable = "true"로 맞춤법 검사 = "거짓"> 요소를 사용할 수 없습니다?

당신은 단지 <입력 유형 = "텍스트"> 대신에 <스팬의 contentEditable = "true"로 맞춤법 검사 = "거짓"> 요소를 사용할 수 없습니다?

주된 이유에 의해 특색있는 (의 contentEditable = "true"를 속성으로서 맞춤법 = "거짓"으로)

당신이 이벤트를 얻을 수 innerText와 같은 값을 쓰는 반면에 당신이 할 수있는 외관 물론, CSS에서 스타일을, 달성하기 :

여기에 바이올린입니다.

불행하게도 실제로 내가 찾을 수있어 IE와 에지에서 작동하지 않는 무언가가있다.
17.당신은 <입력 유형 = "텍스트">에 '입력'이벤트를 바인딩 할 수 있습니다. 이것은 입력이 복사, 붙여 넣기 키 입력 등과 같은 변화 할 때마다 트리거된다.

당신은 <입력 유형 = "텍스트">에 '입력'이벤트를 바인딩 할 수 있습니다. 이것은 입력이 복사, 붙여 넣기 키 입력 등과 같은 변화 할 때마다 트리거된다.
```
$("#input-id").on("input", function(){
    // Your action
})
```

18.이 예제를 확인하고 이벤트입니다 선택할 수 있습니다 관심있는 :

이 예제를 확인하고 이벤트입니다 선택할 수 있습니다 관심있는 :

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

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

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

당신이 뭔가를 할 수있을 것입니다 ...
```
$(#CONTROLID).change(function(){
    do your stuff here ...
});
```
당신은 항상 같은과 컨트롤 목록에 바인딩 할 수 ...
```
var flds = $("input, textarea", window.document);

flds.live('change keyup', function() {
    do your code here ...
});
```
현재와 미래의 페이지에있는 모든 요소를 처리하는 라이브 바인더 보장합니다.
20.이 것을 할 수있는 가장 빠른 및 청소 방법입니다 :

이 것을 할 수있는 가장 빠른 및 청소 방법입니다 :

내가 jQuery를 사용하고 ->
```
$('selector').on('change', function () {
    console.log(this.id+": "+ this.value);
});
```
그것은 나를 위해 꽤 잘 작동합니다.

from https://stackoverflow.com/questions/1948332/detect-all-changes-to-a-input-type-text-immediately-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] ASP.NET 버튼 게시 jQuery를 UI와 대화 (0)	2020.10.05
[JQUERY] 어떻게 텍스트 상자의 내용을 감지하는 방법 변경 (0)	2020.10.05
[JQUERY] 어떻게 바이너리 문자열에서 빌드 PDF 파일에 자바 스크립트를 사용하여 웹 서비스에서 반환 (0)	2020.10.05
[JQUERY] 자바 스크립트 객체의 필터 어레이 (0)	2020.10.05
[JQUERY] jQuery를 사용하여 첫 번째 선택 목록 옵션에 따라 두 번째 선택 목록을 변경하려면 (0)	2020.10.05

복붙노트

[JQUERY] (즉시)을 사용하여 JQuery와 <input 타입 = "텍스트">에서의 모든 변경을 감지

(즉시)을 사용하여 JQuery와 에서의 모든 변경을 감지

해결법

1.이 jQuery 코드는 모든 요소에 즉시 변화를 포착하고, 모든 브라우저에서 작동합니다 :

2.> = 1.9 jQuery를위한 실시간 멋진 솔루션

3.불행하게도, 나는 setInterval을이 상을 수상 생각 :

4.oninput 이벤트에 바인딩 가장 제정신 브라우저에서 잘 작동 보인다. IE9도를 지원하지만 구현은 버그 (문자를 삭제할 때 이벤트가 발생하지 않음)입니다.

5.2017 대답 : 입력 이벤트가 IE8보다 최신 아무것도 정확히이 일을합니다.

7.당신이 다른 답변의 공상하지 않은 경우 여기에 약간 다른 솔루션입니다 :

8.이 코드 어딘가에 추가,이 트릭을 할 것입니다.

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

10.우리는 실제로 자바 스크립트 변화를 감지하기위한 설정 루프에 필요하지 않습니다. 우리는 이미 우리가 감지 할 요소에 많은 이벤트 리스너를 설정. 바로 일을 할 것입니다 어떤 않은 유해 이벤트를 트리거.

11.음, 가장 좋은 방법은 직접 열거 된 세 개의 기지를 커버하는 것입니다. 간단한 : 위해 onblur는 : onKeyUp에, 등, 그래서 그냥 그들을 결합, 당신이 원하는 것을 위해 작동하지 않습니다.

12.이 질문에 10 년 전에 게시되었지만, 나는 여전히 개선이 필요하다고 생각합니다. 그래서 여기 내 솔루션입니다.

13.NO JQUERY! (그것 어쨌든 요즘 오래된 벽돌 쌓는)

14.여기에 내가 자동 완성 변화 채우는 jqueryui 선택 (목록)를 구현하기 위해 사용하고있는 잘 동작하는 예제입니다,하지만 난 정확히 jqueryui 자동 완성 드롭 다운 메뉴를 수행하는 등의 기능을 원하지 않는다.

15.당신은 단순히이 같은 형태의 모든 체인저를 식별 할 수 있습니다

16.당신은 단지 <입력 유형 = "텍스트"> 대신에 <스팬의 contentEditable = "true"로 맞춤법 검사 = "거짓"> 요소를 사용할 수 없습니다?

17.당신은 <입력 유형 = "텍스트">에 '입력'이벤트를 바인딩 할 수 있습니다. 이것은 입력이 복사, 붙여 넣기 키 입력 등과 같은 변화 할 때마다 트리거된다.

18.이 예제를 확인하고 이벤트입니다 선택할 수 있습니다 관심있는 :

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

20.이 것을 할 수있는 가장 빠른 및 청소 방법입니다 :

'JQUERY' 카테고리의 다른 글

티스토리툴바