首页 文章

检测jQuery中的输入变化?

提问于
浏览
332

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

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

8 回答

  • 2

    有一些jQuery事件,如 keyupkeypress ,您可以使用输入HTML元素 . 您还可以使用 blur() 事件 .

  • 181

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

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

    UPDATED for clarification and example

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

    Method 1. input event

    在现代浏览器中使用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.
    });
    

    Method 2. keyup event

    对于较旧的浏览器,使用 keyup 事件(一旦键盘上的某个键被释放,这将触发,此事件可能会产生一种误报,因为当"w"被释放时,输入值会被更改并且 keyup 事件会触发,但是当"shift"键被释放 keyup 事件触发但未对输入进行任何更改 . ) . 如果用户右键单击并粘贴上下文菜单,则此方法也不会触发:

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

    Method 3. Timer (setInterval or setTimeout)

    要绕过 keyup 的限制,您可以设置计时器以定期检查输入的值以确定值的变化 . 您可以使用 setIntervalsetTimeout 进行此计时器检查 . 请参阅此SO问题上的标记答案:jQuery textbox change event或使用 focusblur 事件查看工作示例的小提琴,以启动和停止特定输入字段的计时器

  • 0

    如果你有HTML5:

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

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

    • onchange

    • onkeyupnot keydownkeypress 作为输入's value won'已经有了新的击键)

    • onpaste (支持时)

    有可能:

    • onmouseup (我不确定这个)
  • 0

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

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

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

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

    试试jsFiddle here .

  • 11

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

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

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

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

  • 1

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

  • 80

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

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

    //要手动触发:

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

相关问题