jquery ui-tabs 将焦点放在选定选项卡中的第一个文本框

Question

在以前的版本中，我编写了以下代码来聚焦所选选项卡的第一个文本框：

$(".ui-tabs-panel:not(.ui-tabs-hide) input[type='text']:first").focus();

这不再有效，因为 ui-tabs-hide 在 1.9.x 版本中已被删除。

如何定位活动标签的第一个input？

这里放上我的完整代码。

$(function() {  
$("input:submit, button").button();  
$("#tabs").tabs({  
beforeLoad: function(event, ui) {  
       ui.ajaxSettings.type = 'POST';  
                    ui.jqXHR.error(function() {
                        ui.panel.html(
                                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                                "If this wouldn't be a demo.");
                    });
                }, beforeActivate: function(event, ui) {
                   try {
                        frmGlbObject.validationEngine('hideAll');
                    } catch (e) {
                    }
                },
                load: function(event, ui) {
                    var tabindex = $(ui.tab).index();
                    tableListIndex = tabindex;
                    frmGlbObject = $(".ui-tabs-active input[type='text']:first").closest("form");
                    $(".ui-tabs-active input[type='text']:first").focus();
                    frmGlbObject.validationEngine('attach');
                    divGlbObject = $(frmGlbObject).find(".clsdivs");
                    txtGlbObject = $(frmGlbObject).find(".clsajaxcall[type='text']")
                    hdnGlbObject = $(frmGlbObject).find(".clsajaxcall[type='hidden']")
                    $(".ui-tabs-panel").css('background-color', '#ddddff');

                    if (tabindex == 0) {
                        fun1();
                    } else if (tabindex == 1) {
                        fun2();
                    } else if (tabindex == 2) {
                        fun3();
                    }
                }, activate: function(event, ui) {
                    $(".ui-tabs-active input[type='text']:first").focus();
                    frmGlbObject = $(".ui-tabs-panel:not(.hide) input[type='text']:first").closest("form");
                    divGlbObject = $(frmGlbObject).find(".clsdivs");
                    txtGlbObject = $(frmGlbObject).find(".clsajaxcall[type='text']")
                    hdnGlbObject = $(frmGlbObject).find(".clsajaxcall[type='hidden']")
                    $(".ui-tabs-panel:not(.hide) input[type='text']").bind("keydown", function(e) {
                        var n = $(".ui-tabs-panel:not(.hide) input[type='text']").length;
                        if (e.which == 13) {
                            e.preventDefault(); //Skip default behavior of the enter key
                            var nextIndex = $(".ui-tabs-panel:not(.hide) input[type='text']").index(this) + 1;
                            if (nextIndex < n)
                                $(".ui-tabs-panel:not(.hide) input[type='text']")[nextIndex].focus();
                            else {
                                //$(':input:not(input[type=hidden])')[nextIndex-1].blur();
                                //$('.clsbtnsubmit').click();
                            }
                        }
                    });
                }
            });

        }); 

这里有两个问题：

1. frmGlbObject = $(".ui-tabs-panel:not(.hide) input[type='text']:first").closest("form");

2. $(".ui-tabs-active input[type='text']:first").focus();

上述语句不适用于 Jquery 最新版本。

谢谢

Answer 1

为什么不改为定位ui-state-active 或ui-tabs-active？

$('.ui-state-active input[type="text"]:first').focus();

这将聚焦活动标签的第一个input[type="text"]。

或者将监听器绑定到tabsactivate 事件：

$('.selector').on('tabsactivate', function( event, ui ) {
    // focus input
});

See Tabs API Docs

Answer 2

$("#tabContainer").tabs("option", "active", 1);
          $('#ContentPlaceHolder1_txtboxID').focus();