【问题标题】:Why doesn't simulating a tab keypress move focus to the next input field?为什么不模拟选项卡按键将焦点移动到下一个输入字段?
【发布时间】:2015-12-02 10:31:12
【问题描述】:

注意this 问题。我看到除了触发 tab keypress 事件之外还有其他方法,但我仍然想知道为什么触发 tab keypress 事件不会将焦点移动到下一个输入字段。

Code Pen

HTML

<textarea></textarea>
<textarea></textarea>
<textarea></textarea>

JS

$('textarea').on('keydown', function(e) {
  if (e.metaKey && e.which === 40) {
    console.log('test');
    $(this).trigger({
      type: 'keypress',
      which: 9
    });
  }
});

【问题讨论】:

    标签: javascript jquery


    【解决方案1】:

    因为选项卡事件是用于更改焦点的本机浏览器事件/动作。 .trigger() 函数仅触发分配给它的事件处理程序。请注意,jQuery's site 提供了更多信息:

    .trigger() 函数不能用于模拟原生浏览器事件,例如单击文件输入框或锚标记。这是因为,没有使用与这些事件对应的 jQuery 事件系统附加的事件处理程序。

    有一个名为jquery-simulate 的插件来处理这个问题。话虽如此,tab 键更改焦点实际上是 Web 浏览器中的默认操作。正如KeyboardEvents 的文档所述,触发浏览器原生事件并不意味着它会执行默认操作:

    请注意,手动触发事件不会生成与该事件关联的默认操作。例如,手动触发键事件不会导致该字母出现在焦点文本输入中。对于 UI 事件,出于安全原因,这很重要,因为它可以防止脚本模拟与浏览器本身交互的用户操作。

    【讨论】:

    • 所以.trigger()触发事件与...手动触发事件不同?这是误导。还是我缺少什么?
    • 知道为什么this 不起作用吗?您链接到says 的页面“...可以以编程方式创建一个行为,就好像某人实际上...”。我在this 指南中做了所有事情,但它似乎不起作用。
    • @AdamZerner 这实际上有点误导,在KeyEvents 的文档中。页面底部有一条注释提到:“请注意,手动触发事件不会生成与该事件关联的默认操作。例如,手动触发键事件不会导致该字母出现在一个有焦点的文本输入。对于 UI 事件,出于安全原因,这很重要,因为它可以防止脚本模拟与浏览器本身交互的用户操作。"
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多