Question

我已经查看了许多其他问题并找到了非常简单的答案，包括下面的代码。我只想检测某人是否更改了文本框的内容但由于某种原因它无法正常工作......我没有得到控制台错误。当我在浏览器中设置change()函数的断点时，它永远不会命中它。

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

<input id="inputDatabaseName">

Answer 1

您可以在jQuery中使用input Javascript event，如下所示：

$('#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();"/>

Answer 2

尝试键盘而不是更改。

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

这是the official jQuery documentation for .keyup()。

Answer 3

每个答案都缺少一些要点，所以这是我的解决方案：

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

Answer 4

文本输入不会触发change事件，直到它们失去焦点。单击输入外部，将显示警报。

如果在文本输入失去焦点之前应该触发回调，请使用.keyup()事件。

Answer 5

当浏览器对文本框执行自动填充时，

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>

Answer 6

就我而言，我有一个附加到日期选择器的文本框。对我有用的唯一解决方案是在datepicker的onSelect事件中处理它。

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

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

Answer 7

我认为您也可以使用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;
  }
});

Answer 8

试试这样的方法，它总是有效的。

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

Answer 9

WORKING：

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

检测已更改的输入文本框

9 个答案: