检测已更改的输入文本框

Question

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

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

<input id="inputDatabaseName">

Answer 1

您可以使用input像jQuery这样的事件:

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

这是.keyup()的官方jQuery文档.

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和不是6搜索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>