Phát hiện hộp văn bản đầu vào đã thay đổi

Tôi đã xem xét rất nhiều câu hỏi khác và tìm thấy câu trả lời rất đơn giản, bao gồm cả đoạn mã dưới đây. Tôi chỉ đơn giản muốn phát hiện khi ai đó thay đổi nội dung của hộp văn bản nhưng vì một số lý do, nó không hoạt động ... Tôi không gặp lỗi bảng điều khiển. Khi tôi đặt một điểm dừng trong trình duyệt tại change()chức năng, nó không bao giờ chạm vào nó.

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

<input id="inputDatabaseName">

Bạn có thể sử dụng inputsự kiện Javascript trong jQuery như thế này:

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

Trong JavaScript thuần túy:

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

Hoặc như thế này:

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

thử keyup thay vì thay đổi.

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

Đây là tài liệu jQuery chính thức cho .keyup () .

Mỗi câu trả lời đều thiếu một số điểm, vì vậy đây là giải pháp của tôi:

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

Các Input Eventvụ cháy trên đầu vào Bàn phím , Kéo chuột , Tự động điền và Sao chép-Dán đã được thử nghiệm trên Chrome và Firefox. Kiểm tra giá trị trước đó làm cho nó phát hiện các thay đổi thực sự, có nghĩa là không bắn khi dán cùng một thứ hoặc gõ cùng một ký tự, v.v.

Ví dụ hoạt động: http://jsfiddle.net/g6pcp/473/

cập nhật:

Và nếu bạn muốn chạy change function chỉ khi người dùng nhập xong và ngăn thực hiện hành động thay đổi nhiều lần, bạn có thể thử điều này:

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

Nếu người dùng bắt đầu nhập (ví dụ: "foobar"), mã này sẽ ngăn bạn change actionchạy cho mọi loại người dùng chữ cái và chỉ chạy khi người dùng dừng gõ, Điều này đặc biệt tốt khi bạn gửi đầu vào đến máy chủ (ví dụ: đầu vào tìm kiếm), đó là cách máy chủ không chỉ có một tìm kiếm foobarvà không sáu tìm kiếm fvà sau đó fovà sau đó foovà foobvân vân.

Đầu vào văn bản không kích hoạt changesự kiện cho đến khi chúng mất tập trung. Nhấp vào bên ngoài của đầu vào và cảnh báo sẽ hiển thị.

Nếu cuộc gọi lại sẽ kích hoạt trước khi nhập văn bản mất tiêu điểm, hãy sử dụng .keyup()sự kiện.

onkeyup, onpaste, onchange, oninputdường như không thành công khi trình duyệt thực hiện tự động điền trên các hộp văn bản. Để xử lý trường hợp như vậy, hãy bao gồm " autocomplete='off'" trong trường văn bản của bạn để ngăn trình duyệt tự động điền vào hộp văn bản,

Ví dụ,

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

Trong trường hợp của tôi, tôi đã có một hộp văn bản được đính kèm với một datepicker. Giải pháp duy nhất hiệu quả với tôi là xử lý nó bên trong sự kiện onSelect của datepicker.

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

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

Tôi nghĩ bạn cũng có thể sử dụng 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;
  }
});

ĐANG LÀM VIỆC:

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