捕获TAB键并触发其他按键

Capture TAB keydown and trigger other keypress

本文关键字：其他 TAB 捕获      更新时间：2023-09-26

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

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

要做到这一点，我想捕获TAB键并触发一个回车键，后跟一个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.p preventdefault ()， tab键不能切换焦点到下一个输入。但是，没有触发enter和tab操作，因此什么也不会发生。我该怎么办?提前谢谢你!

更新10/10:找到问题!触发事件x (tab键)使代码进入无限循环。因此，整个方法是错误的。

当我尝试传递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);
        }
    });

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

因此，最好使用一个名为onblur的函数: 
$('form[class="ui form"]').on('blur', '.dropdown', function () {
        var y = jQuery.Event('keydown', {which: 13});
        $(this).trigger(y);
    });
相关文章：