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

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

다른 수많은 질문들을 살펴보았고 아래의 코드를 포함하여 매우 간단한 답들을 찾았습니다.텍스트 상자의 내용을 변경하는 경우를 탐지하려고 하는데 어떤 이유에서인지 제대로 작동하지 않습니다.콘솔 오류가 발생하지 않습니다.브라우저에서 중단점을 설정할 때change()절대 부딪히지 않는 기능.

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

<input id="inputDatabaseName">

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

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

순수 자바스크립트:

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 EventChrome 및 Firefox에서 키보드 입력, 마우스 드래그, 자동 채우기 및 복사 붙여넣기 테스트에서 발생합니다.이전 값을 확인하면 실제 변경 내용을 감지할 수 있습니다. 즉, 동일한 내용을 붙여넣거나 동일한 문자를 입력할 때 실행되지 않습니다.

작동 예: 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그리고 6번의 검색이 아닙니다.f그리고 나서.fo그리고 나서.foo그리고.foob등등.

텍스트 입력은 실행되지 않습니다.change그들이 초점을 잃을 때까지 사건.입력 외부를 클릭하면 경고가 표시됩니다.

텍스트 입력이 포커스를 잃기 전에 콜백이 발생해야 하는 경우 이벤트를 사용합니다.

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>

저의 경우, 저는 데이트 상대 선택기에 첨부된 텍스트 상자를 가지고 있었습니다.저에게 효과가 있었던 유일한 해결책은 날짜 선택기의 onSelect 이벤트 내에서 처리하는 것입니다.

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

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

이런 것을 시도해 보세요, 항상 효과가 있습니다.

$(function() {
    $("#my_input").on("change paste keyup", function() {
       alert($(this).val()); 
    });
});

사용할 수 있을 것 같습니다.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;
  }
});

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

원천

작업:

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

언급URL : https://stackoverflow.com/questions/6153047/detect-changed-input-text-box