检测jQuery中的输入变化？

Question

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

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

Answer 1

更新以获得澄清和示例

示例: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开始,替换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文本框更改事件或查看工作示例的小提琴使用focus和blur事件来启动和停止特定输入字段的计时器

Answer 2

如果你有HTML5:

• oninput (仅在实际发生更改时触发,但立即执行此操作)

否则,您需要检查所有这些可能表示输入元素值更改的事件:

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

有可能:

• onmouseup (我不确定这一个)

Answer 3

使用HTML5并且不使用jQuery,您可以使用以下input事件:

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

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

每次输入文本更改时都会触发.

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

在这里尝试jsFiddle.

Answer 4

正如其他人已经建议的那样,您的案例中的解决方案是嗅探多个事件.
执行此工作的插件通常会侦听以下事件:

$input.on('change keydown keypress keyup mousedown click mouseup', handler);

如果你认为它可能适合,您可以添加focus,blur和其他活动了.
我建议不要超过要监听的事件,因为它会在浏览器内存中加载根据用户行为执行的进一步程序.

注意:请注意,使用JavaScript更改input元素的值(例如,通过jQuery .val()方法)不会触发上面的任何事件.
(参考: https: //api.jquery.com/change/).