Question

我正在尝试以html格式更改选择的行为。

我希望当用户使用键盘导航表单时，如果他正在选择元素并按Tab键，则会选择该元素并将焦点切换到下一个表单输入。通常，您需要按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

代码＆＃39;工作＆＃39;在e.preventDefault（）之前，tab keypress不会将焦点切换到下一个输入。但是，不会触发输入和制表符操作，因此不会发生任何操作。我该怎么办？提前谢谢！

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

Answer 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);

        }
    });

Answer 2

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

因此，最好使用名为onblur的函数：

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

捕获TAB keydown并触发其他按键

2 个答案: