Question

我在尝试使用带有自动填充字段的Tab键解决问题时遇到问题。

这个想法是，当用户按下向上或向下键，然后选项卡进行选择并移动到下一个字段时，会发生的事情是该选项卡意外跳过其他（可能的）tabindex。

整件事让我疯狂，这是代码：

$(function () {
    var countryTags = ["China", "Colombia", "Cuba"];
    var cityTags = ["China", "Colombia", "Cuba"];
    $("#whatcountry").autocomplete({
        source: function (request, response) {
            var results = $.ui.autocomplete.filter(countryTags, request.term);
            response(results.slice(0, 5));
        },
        select: function (event, ui) {
            $("#whatcity").focus();
        }
    });
    $("#whatcity").autocomplete({
        source: function (request, response) {
            var results = $.ui.autocomplete.filter(cityTags, request.term);
            response(results.slice(0, 5));
        },
        select: function (event, ui) {
            $("#Submitme").focus();
        }
    });
    // Hover states on the static widgets
    $("#dialog-link, #icons li").hover(
        function () {
            $(this).addClass("ui-state-hover");
        },
        function () {
            $(this).removeClass("ui-state-hover");
        });
});

请参阅jsfiddle！这证明了这个问题。

有什么想法吗？

Answer 1

当tab键用于选择项目时，jQuery UI自动完成似乎可以很好地设置焦点。设置一个特殊情况以通过回车键处理选择或单击：

select: function (event, ui) {
    var e = event.originalEvent.originalEvent;
    if (e.which === 1 || e.which === 13) {
        $("#whatever").focus();
    }
}

Demo here
Read the documentation改进代码

使用鼠标或输入键选择项目时模糊文本框

1 个答案: