检测更改的输入文本框

我查看了许多其他问题，并找到了非常简单的答案，包括下面的代码。我只是想检测何时有人更改了文本框的内容，但由于某种原因它无法正常工作……我没有控制台错误。当我在浏览器中的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对火灾键盘输入，拖动鼠标，自动填充和复制粘贴的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和不是6搜索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();
            }
        });
    //}
});