检测文本输入框的更改

Question

我看了很多其他的问题，并找到了非常简单的答案，包括下面的代码。 我只是想检测当有人更改文本框的内容时，但出于某种原因它不起作用... 我没有控制台错误。 当我在浏览器中在change()函数处设置断点时，它从未命中过。

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

<input id="inputDatabaseName">

- user736893

---

只需要尝试几件事情：将输入类型设置为"text"并将其变成单例元素。<input id="inputDatabaseName" type="text"/> - szeliga

Answer 1

您可以像这样在jQuery中使用input JavaScript事件：

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

- Ouadie

---

似乎找不到关于这个事件的文档，但它的运行方式与我预期的完全一致。您知道在哪里可以找到相关文档页面吗？ - Jorge Pedret

你可以在 HTML5 事件列表中找到它：http://www.w3schools.com/tags/ref_eventattributes.asp 或者在这里：http://help.dottoro.com/ljhxklln.php - Ouadie

这种解决方案实际上比使用 keyup 更好。例如，IE 允许用户通过单击 X 清除输入字段，而这不会触发 keyup。 - Georg

目前为止最接近的解决方案，但当浏览器在文本框上执行自动填充时仍无法正常工作。 - Saumil

这个回答比第一个回答好得多。Ctrl、Shift键都算作keyup事件。最糟糕的是，如果你打字速度很快，几个输入可能只会被识别为一个keyup事件。 - octref

Answer 2

尝试使用keyup而不是change。

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

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

- Scott Harwell

---

叹气 我发誓我试过了（在查看这个问题后：https://dev59.com/rHM_5IYBdhLWcg3wSBAU)... 但显然没有，因为现在它可以工作了！ - user736893

只有在元素失去焦点时，改变才会触发；而松开键盘上的按键时会触发 keyup。 - Declan Cook

如果用户使用Ctrl+v或鼠标拖动选定的文本粘贴代码到#inputDatabaseName中，该怎么检测？ - Radu Simionescu

问题在于它仍然没有考虑内容是否实际发生了改变，只是按钮被按下了。 - Metropolis

@Metropolis，你看到我的回答了吗？？https://dev59.com/yG025IYBdhLWcg3wNS8V#23266812 - azerafati

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"），此代码可以防止每个键入的字母都运行您的更改操作，并且仅在用户停止键入时运行，这对于当您将输入发送到服务器（例如搜索输入）非常有用，因此服务器仅针对foobar进行一次搜索，而不是六次搜索f，然后是fo，然后是foo，再到foob等等。

- azerafati

---

这是我尝试的大约六个中第一个能用的。太棒了。谢谢。 - Enkode

几乎可以在IE9上工作：如果您删除一个字符，它不会触发事件。非常好的解决方法。 - Soma

@Soma，正如其他人所说，“破坏IE不是缺陷，而是特性”；） 虽然IE已经停止更新了，但如果您有解决方法，请告诉我们。 - azerafati

@Soma，如果这是IE工作的唯一方法，你可以按照我的方式使用它，只需更改此行$("#input").on("input focusout",function(e){。 - azerafati

@Ehsan，“e”代表“event”，这是jQuery传递给回调函数的事件对象。仅仅是一种习惯，从未被使用过。如果您不需要它，可以将其删除。 - azerafati

Answer 4

文本输入框在失去焦点前不会触发change事件。点击输入框以外的区域，警报将显示。

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

- Matt Ball

---

change 正在这里工作: http://jsfiddle.net/g6pcp/ ； keyup 显示每个按键后的警报，这不是一个好方法。 - xkeshav

@diEcho，我认为警告只是一个示例，用于让他的代码起作用......而不是他最终打算做的事情。 - Scott Harwell

@diEcho，就像Scott所说的那样，这只是为了测试目的。这就是我调试的方式 :D - user736893

@Scott 请请请使用一个合适的调试器，而不是 alert()。这将使调试变得轻松得多。 - Matt Ball

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>

- Saumil

Answer 6

在我的情况下，我有一个与日期选择器关联的文本框。对我有效的唯一解决方案是在日期选择器的onSelect事件中处理它。

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

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

- kmxr

---

使用相同的日期选择器并需要相同的东西，谢谢！但仍然很奇怪，输入更改无法像可以检测到<select>上的更改一样被检测到。 - yenren

Answer 7

试试这样做，它总是有效的。

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

- ucMedia

Answer 8

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

源代码

- Darwin

Answer 9

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

- Yoosaf Abdulla

Answer 10

$(document).on('input', '#inputDatabaseName', function () { alert("yess"); });

- rashid choudhary

---

请留下一些解释。当您包含代码片段时，请使用代码块。 - undefined