在jQuery中检测输入变化?

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

在我的例子中，我需要在输入值更改后立即调用服务(检查值是否有效)。我怎么才能做到呢?

598834 次浏览
小开
有jQuery事件，如按键弹起和键盘按键，你可以使用输入HTML元素。 你还可以使用模糊()事件
小开

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

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

//触发手动使用:

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

如果你想要在元素中发生变化时触发事件，那么你可以使用按键弹起事件。

小开
最佳答案

UPDATED用于澄清和示例

例子:http://jsfiddle.net/pxfunc/5kpeJ/

方法1。input事件

在现代浏览器中使用input事件。当用户在文本框中输入，粘贴，撤销，基本上任何时候值从一个值改变到另一个值，这个事件都会触发。

在jQuery中这样做

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

从jQuery 1.7开始，用on替换bind:

$('#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文本框更改事件或查看使用focus和blur事件启动和停止特定输入字段的计时器的工作示例

小开

如果你有HTML5:

  • oninput(仅在实际发生更改时触发，但立即触发)

否则，你需要检查所有这些事件，这些事件可能表明输入元素的值发生了变化:

  • onchange
  • onkeyup (不 keydown或keypress作为输入的值还没有新的击键)
  • onpaste(当支持时)

也许:

  • onmouseup(我不确定这个)
小开

这涵盖了使用jQuery 1.7及以上版本对输入的所有更改:

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

使用HTML5和不使用jQuery，你可以使用input事件:

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


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

这将在每次输入文本更改时触发。

IE9+及其他浏览器支持。

尝试它生活在jsFiddle这里。

小开
正如其他人已经建议的那样，在你的情况下的解决方案是嗅探多个事件。
执行此任务的插件通常监听以下事件 
$input.on('change keydown keypress keyup mousedown click mouseup', handler);

If you think it may fit, you can add focus, blur and other events too.
I suggest not to exceed in the events to listen, as it loads in the browser memory further procedures to execute according to the user's behaviour.

Attention: note that changing the value of an input element with JavaScript (e.g. through the jQuery .val() method) won't fire any of the events above.
(Reference: https://api.jquery.com/change/).


提交答案