【问题标题】:jQuery 'input' eventjQuery“输入”事件
【发布时间】:2013-06-27 09:05:20
【问题描述】:

在看到 jsfiddle 之前,我从未听说过 jQuery 中称为 input 的事件。

你知道它为什么起作用吗?是keyup 的别名还是什么?

$(document).on('input', 'input:text', function() {});

【问题讨论】:

标签: jquery events input


【解决方案1】:

在通过用户界面更改元素的文本内容时发生。

它不完全是 keyup 的别名,因为即使按键什么都不做,keyup 也会触发(例如:按下然后松开 Control 键将触发 keyup 事件)。

一个很好的思考方式是这样的:它是一个在输入发生变化时触发的事件。这包括 - 但不限于 - 按下修改输入的键(例如,Ctrl 本身不会触发事件,但 Ctrl-V 粘贴一些文本会),选择自动完成选项、Linux 风格的中键粘贴、拖放和许多其他操作。

有关更多详细信息,请参阅this 页面和此答案上的 cmets。

【讨论】:

  • 你知道jQuery是否弥补了缺少的浏览器支持吗? (IE8、IE9 不一致等)
  • 我刚刚搜索了“js 输入事件”。知道用什么术语在谷歌上找到你想要的东西是有诀窍的;它带有经验。然后,当然,谷歌会记录一切并用它来了解你真正想要的东西。我的大部分搜索都是针对 API 文档和编程问题,所以随着时间的推移,我了解到,当我搜索内容时,它可能应该向我显示 API 文档和编程答案。
  • 嗯,我在搜索“jQuery 输入事件”,我不知道这是一个原始的 JS 事件。同样在这里,第一个结果通常来自 SO,我认为这主要是事实上的答案/官方信息来源。
  • input 实际上不仅仅是一个过滤的keyup,例如,当从先前使用的值列表中选择该值时,它也会触发......这很难在没有input 事件的情况下进行处理。
  • oninput 也会在通过鼠标更改文本时触发(通过拖放,或通过右键单击菜单或中键单击粘贴)。
【解决方案2】:

oninput 事件对于跟踪输入字段的变化非常有用。

但 IE 版本 onpropertychange,其作用与oninput 相同。

所以你可以这样使用它:

$(':input').on('input propertychange');

拥有完整的跨浏览器支持。

由于可以为任何属性更改触发属性更改,例如,禁用的属性被更改,那么您想要包含以下内容:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

【讨论】:

  • 正是我需要的。谢谢你。 (我讨厌不得不支持
  • 更多信息:“在输入字段中放置文本后,Opera 不会触发输入事件。当用户从由键盘、剪切或填充的输入中删除字符时,IE 9 不会触发输入事件。拖动操作。” developer.mozilla.org/en-US/docs/Web/Events/…
  • 这段代码有问题。如果在输入元素上设置了 maxlength,即使达到最大长度且值未更改,也会触发 'input' 事件
  • 但是为什么不只是两个独立的函数呢?这样,就无需检查事件类型或属性名称。代码可以在第三个共享函数中。
【解决方案3】:

使用jQuery,下面的效果是一样的:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

然而,对于input 事件,似乎只有第二种模式在我测试过的浏览器中有效。

因此,您希望它可以工作,但它没有(至少目前):

$(':text').input(function(){ doSomething(); });

同样,如果您想利用事件委托(例如,在将您的 input.text 添加到 DOM 之前在 #container 上设置事件),应该想到这一点:

$('#container').on('input', ':text', function(){ doSomething(); });

可悲的是,它目前无法正常工作!

只有这种模式有效:

$(':text').on('input', function(){ doSomething(); });

编辑了更多当前信息

我当然可以确认这种模式:

$('#container').on('input', ':text', function(){ doSomething(); });

现在也可以在所有“标准”浏览器中使用。

【讨论】:

    【解决方案4】:

    正如 claustrofob 所说,IE9+ 支持 oninput。

    However, "oninput 事件在 Internet Explorer 9 中存在问题。仅当插入字符时,才通过用户界面从文本字段中删除字符时不会触发该事件。尽管 Internet Explorer 9 支持 onpropertychange 事件, 但与 oninput 事件类似,它也是有问题的,它不会在删除时触发。

    由于可以通过多种方式删除字符(Backspace 和 Delete 键、CTRL + X、上下文菜单中的 Cut 和 Delete 命令),因此没有很好的解决方案来检测所有更改。如果字符被上下文菜单的删除命令删除,则在 Internet Explorer 9 中的 JavaScript 中无法检测到该修改。"

    我有很好的结果绑定到输入和 keyup(和 keydown,如果你希望它在 IE 中触发,同时按住 Backspace 键)。

    【讨论】:

      【解决方案5】:

      使用 INPUT 时要小心。此事件在 IE 11 中在焦点和模糊时触发。但在其他浏览器中发生更改时触发。

      https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

      【讨论】:

        【解决方案6】:

        我认为“输入”在这里的工作方式与“oninput”在 DOM 级别 O 事件模型中的工作方式相同。

        顺便说一句:

        正如 Silkfire 评论的那样,我也搜索了“jQuery 输入事件”。因此,我被带到这里并惊讶地发现“输入”是 jquery bind() 命令的可接受参数。 在 jQuery in Action(第 102 页,2008 年版)中,没有提及“输入”作为可能的事件(相对于其他 20 个事件,从“模糊”到“卸载”)。确实,在第 3 页。 92,相反可以通过重读(即从对 0 级和 2 级模型之间的不同字符串标识符的引用)推测出来。这是相当误导的。

        【讨论】:

        • 感谢您的输入(不是双关语),现在这似乎是一个官方线程! :)
        【解决方案7】:

        jQuery 对.on() 方法具有以下签名:.on( events [, selector ] [, data ], handler )

        事件可以是此参考中列出的任何事件:

        https://developer.mozilla.org/en-US/docs/Web/Events

        不过,并非所有浏览器都支持它们。

        Mozilla 对输入事件声明如下:

        当一个 或元素已更改。此外,它会在 内容更改时的 contenteditable 编辑器。

        【讨论】:

          【解决方案8】:
          $("input#myId").bind('keyup', function (e) {    
              // Do Stuff
          });
          

          在 IE 和 chrome 中工作

          【讨论】:

          • bind 已弃用,请使用 on
          猜你喜欢
          • 2016-09-16
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2021-09-21
          • 1970-01-01
          • 1970-01-01
          • 2011-08-11
          • 2013-01-02
          相关资源
          最近更新 更多