변경된 입력 텍스트 상자 감지

다른 많은 질문을 살펴본 결과 아래 코드를 포함하여 매우 간단한 답변을 찾았습니다. 누군가 텍스트 상자의 내용을 변경할 때 감지하고 싶지만 어떤 이유로 든 작동하지 않습니다 ... 콘솔 오류가 발생하지 않습니다. 브라우저에서 change()함수 의 중단 점을 설정 하면 절대로 충돌하지 않습니다.

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});

<input id="inputDatabaseName">

다음 과 같이 jQuery 에서 inputJavascript 이벤트 를 사용할 수 있습니다 .

$('#inputDatabaseName').on('input',function(e){
    alert('Changed!')
});

순수한 JavaScript에서 :

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

또는 이렇게 :

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>

변경 대신 키업을 시도하십시오.

<script type="text/javascript">
   $(document).ready(function () {
       $('#inputDatabaseName').keyup(function () { alert('test'); });
   });
</script>

다음 은 .keyup () 공식 jQuery 설명서입니다 .

각 답변에는 몇 가지 요점이 없으므로 여기 내 해결책이 있습니다.

$("#input").on("input", function(e) {
  var input = $(this);
  var val = input.val();

  if (input.data("lastval") != val) {
    input.data("lastval", val);

    //your change action goes here 
    console.log(val);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>

Input Event에 화재 키보드 입력, 마우스 드래그 , 자동 채우기 및 복사 - 붙여 넣기 크롬과 파이어 폭스에서 테스트. 이전 값을 확인하면 실제 변경 사항을 감지하여 동일한 것을 붙여 넣거나 동일한 문자 등을 입력 할 때 발생하지 않습니다.

실례 : http://jsfiddle.net/g6pcp/473/

최신 정보:

change function 사용자가 입력을 마치고 변경 작업을 여러 번 실행하지 못하게 할 때만 실행 하려면 다음을 시도하십시오.

var timerid;
$("#input").on("input", function(e) {
  var value = $(this).val();
  if ($(this).data("lastval") != value) {

    $(this).data("lastval", value);
    clearTimeout(timerid);

    timerid = setTimeout(function() {
      //your change action goes here 
      console.log(value);
    }, 500);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">

사용자가 입력을 시작하면 (예 : "foobar")이 코드는 change action모든 문자 사용자 유형에 대해 실행을 방지 하고 사용자가 입력을 중지 할 때만 실행됩니다. 이는 입력을 서버로 보낼 때 특히 유용합니다 (예 : 검색 입력). 웨이 서버는 않는 단 하나의 검색 foobar이 아닌 육에 대한 검색 f후와 fo후 foo와 foob등등을.

텍스트 입력은 change 포커스를 잃을 때까지 이벤트를 시작 . 입력 외부를 클릭하면 경고가 표시됩니다.

텍스트 입력이 포커스를 잃기 전에 콜백이 발생하면 .keyup()이벤트를 사용하십시오 .

onkeyup, onpaste, onchange, oninput브라우저가 텍스트 상자에서 자동 완성을 수행하면 실패한 것 같습니다. 이러한 경우를 처리하려면 "autocomplete='off' 브라우저가 텍스트 상자를 자동으로 채우지 못하도록 텍스트 필드에 "를 포함하십시오.

예 :

<input id="inputDatabaseName" autocomplete='off' onchange="check();"
 onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />

<script>
     function check(){
          alert("Input box changed");
          // Things to do when the textbox changes
     }
</script>

필자의 경우 날짜 선택기에 첨부 된 텍스트 상자가있었습니다. 나를 위해 일한 유일한 해결책은 datepicker의 onSelect 이벤트 내에서 처리하는 것입니다.

<input type="text"  id="bookdate">

$("#bookdate").datepicker({            
     onSelect: function (selected) {
         //handle change event here
     }
});

나는 당신도 사용할 수 있다고 생각합니다 keydown:

$('#fieldID').on('keydown', function (e) {
  //console.log(e.which);
  if (e.which === 8) {
    //do something when pressing delete
    return true;
  } else {
    //do something else
    return false;
  }
});

일:

$("#ContentPlaceHolder1_txtNombre").keyup(function () {
    var txt = $(this).val();
        $('.column').each(function () {
            $(this).show();
            if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
                $(this).hide();
            }
        });
    //}
});