jquery ui-tabs在选定选项卡中聚焦第一个文本框

时间:2013-05-30 11:18:22

标签: jquery jquery-ui

在以前的版本中,我编写了以下代码来聚焦所选标签的第一个文本框:

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

自版本1.9.x。

以来,ui-tabs-hide已删除,此操作不再有效

如何定位活动标签的第一个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”)。nearest(“form”);

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

  3. 上述声明在Jquery最新版本中不起作用。

    由于

2 个答案:

答案 0 :(得分:1)

为什么不定位ui-state-activeui-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

答案 1 :(得分:-1)

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