ตรวจจับกล่องข้อความอินพุตที่เปลี่ยนแปลง

ฉันได้ดูคำถามอื่น ๆ อีกมากมายและพบคำตอบที่ง่ายมากรวมถึงรหัสด้านล่าง ฉันต้องการตรวจสอบเมื่อมีคนเปลี่ยนเนื้อหาของกล่องข้อความ แต่ด้วยเหตุผลบางอย่างมันไม่ทำงาน ... ฉันไม่ได้รับข้อผิดพลาดของคอนโซล เมื่อฉันตั้งเบรกพอยต์ในเบราว์เซอร์ที่change()ฟังก์ชั่นมันไม่เคยกระทบ

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

<input id="inputDatabaseName">

คุณสามารถใช้inputเหตุการณ์ Javascriptใน jQuery เช่นนี้:

$('#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>

นี่เป็นเอกสารอย่างเป็นทางการสำหรับ jQuery .keyup ()

คำตอบแต่ละข้อหายไปบางจุดดังนั้นนี่เป็นวิธีแก้ปัญหาของฉัน:

$("#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ไฟบนแป้นพิมพ์ป้อนข้อมูลเมาส์ลาก , ป้อนอัตโนมัติและคัดลอกวางทดสอบบน Chrome และ 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และไม่ใช่การค้นหาหกครั้ง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 ของ datepicker

<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();
            }
        });
    //}
});