捕获 TAB keydown 并触发其他按键答案

【问题标题】：Capture TAB keydown and trigger other keypress捕获 TAB keydown 并触发其他按键
【发布时间】：2015-10-07 09:36:27
【问题描述】：

我正在尝试更改 html 表单中选择的行为。

我希望当用户使用键盘导航表单时，如果他正在选择一个元素并按下选项卡，则该元素被选中并且焦点切换到下一个表单输入。通常，您需要按 Enter 键选择元素，然后您可以使用 Tab 切换到下一个元素。如果不按回车，则不选择任何选项。

为此，我想捕获 TAB 按键并触发 ENTER 按键，然后触发 TAB。

这是我现在拥有的：

     $('form[class="ui form"]').on('keydown', 'div[class="ui fluid selection dropdown active visible"]', function (e) {
        var keyCode = e.keyCode || e.which;

        if (keyCode == 9) {
            e.preventDefault();
            var y = jQuery.Event('keydown', {which: 13});
            $(this).trigger(y);
            var x = jQuery.Event('keydown', {which: 9});
            $(this).trigger(x);
        }
    });

这是一个演示：JSFiddle

代码“工作”到 e.preventDefault()，tab 按键不会将焦点切换到下一个输入。但是，不会触发 enter 和 tab 操作，因此没有任何反应。我该怎么办？提前谢谢你！

更新 10/10：发现问题！触发事件 x（tab 按键）使代码进入无限循环。因此，整个方法是错误的。我很快就会发布答案。

【问题讨论】：

如果将which 替换为keyCode 会发生什么？
@BenM 没有任何变化
您是否尝试改为触发按键？
@JuanMendes 我也试过了，JSFiddle 演示显示了我遇到的问题
当我尝试通过which 时，它确实有效jsfiddle.net/mendesjuan/sL7tnfm6/5

标签： javascript jquery

【解决方案1】：

当我尝试将 which 作为事件对象传递时，它确实有效 jsfiddle.net/mendesjuan/sL7tnfm6/5

    $('form[class="ui form"]').on('keydown', 'div[class="ui fluid selection dropdown active visible"]', function (e) {
        var keyCode = e.keyCode || e.which;

        if (keyCode == 9) {
            e.preventDefault();
            var y = jQuery.Event('keydown', {which: 13});
            $(this).trigger(y);

        }
    });

【讨论】：

这部分确实有效，但并没有解决问题：焦点停留在当前下拉列表而不是关注下一个表单元素

【解决方案2】：

问题中的草稿代码触发了无限循环。问题的关键在于当用户按下 TAB 键并将焦点切换到下一个元素时捕获选定的（活动）元素。

所以，最好使用一个名为onblur的函数：

$('form[class="ui form"]').on('blur', '.dropdown', function () {
        var y = jQuery.Event('keydown', {which: 13});
        $(this).trigger(y);
    });

【讨论】：