Question

在.change上使用jquery input时，只有在输入失去焦点时才会触发事件

在我的情况下，我需要在输入值改变后立即调用服务（检查值是否有效）。我怎么能做到这一点？

Answer 1

更新了澄清和示例

方法1. input事件

在现代浏览器中使用input事件。当用户在文本字段中键入，粘贴，撤消时，基本上随时将值从一个值更改为另一个值时，将触发此事件。

在jQuery中这样做

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

从jQuery 1.7开始，将bind替换为on：

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

方法2. keyup事件

对于旧版浏览器，使用keyup事件（一旦键盘上的某个键被释放，这将触发，此事件会产生一种误报，因为当“w”被释放时，输入值会被更改， keyup事件触发，但是当“shift”键被释放时，keyup事件将触发，但输入没有任何变化。）。如果用户右键单击并粘贴上下文菜单，则此方法也不会触发：

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

方法3.计时器（setInterval或setTimeout）

要解决keyup的限制，您可以设置计时器以定期检查输入值以确定值的变化。您可以使用setInterval或setTimeout执行此计时器检查。请参阅此SO问题的标记答案：jQuery textbox change event或查看使用focus和blur事件启动和停止特定输入字段的计时器的工作示例的小提琴

Answer 2

如果你有HTML5：

oninput（仅在实际发生更改时触发，但会立即触发）

否则，您需要检查所有这些可能表示输入元素值发生变化的事件：

onchange
onkeyup（不 keydown或keypress，因为输入的值不会包含新的击键）
onpaste（支持时）

并且可能：

onmouseup（我不确定这个）

Answer 3

使用HTML5并且不使用jQuery，您可以使用input event：

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

每次输入的文字发生变化时都会触发。

在IE9 +和其他浏览器中受支持。

在jsFiddle here中试用。

Answer 4

如果您希望在元素中更改某些内容时触发事件，则可以使用keyup事件。

Answer 5

有一些jQuery事件，例如 keyup 和 keypress ，您可以将它们与输入HTML元素一起使用。您还可以使用模糊（）事件。

Answer 6

// .blur在元素失去焦点时被触发

$('#target').blur(function() {
  alert($(this).val());
});

//触发手动使用：

$('#target').blur();

Answer 7

这涵盖了使用jQuery 1.7及更高版本对输入的每次更改：

$(".inputElement").on("input", null, null, callbackFunction);

检测jQuery中的输入变化？

7 个答案: