jQuery 手风琴 - 为活动手风琴设置输入焦点？答案

【问题标题】：jQuery accordion - set input focus for active accordion?jQuery 手风琴 - 为活动手风琴设置输入焦点？
【发布时间】：2010-03-08 01:51:41
【问题描述】：

**没关系。我想到了。 **

我是这样做的：

$("#accordion").accordion({
        header:'h3',
        active: '#section1',
        autoheight: false,
        clearstyle: true,
}).bind("change.ui-accordion", function(event,ui) {
    $("#text1").focus();
});

我已经设置了一个手风琴，每个 div 里面都有一个表单。我只是想弄清楚如何根据打开的输入字段将焦点设置在输入字段上...

/* accordion */
$("#accordion").accordion({
        header:'h3',
        active: '#section1',
        autoheight: false,
        clearstyle: true
});

基本上，我想在打开的任何部分的第一个输入字段中设置光标。实际的形式要大得多，所以我把它压缩得很大......

    <div id="accordion">
        <h3 id="section1"><a href="#">Section 1/a></h3>
        <div>
            <form id="form1" action="form.php" method="post">
                <fieldset class="inside">
                    <input type="text" name="text1" id="text1" size="50" value="Default text" />
                    <input class="open" type="button" value="Submit" name="submit1" />
                </fieldset>
            </form>
        </div><!--/div-->

        <h3 id="section2"><a href="#">Section 2</a></h3>
        <div>
            <form id="form2" action="form.php" method="post">
                <fieldset class="inside">
                    <input type="text" name="text2" id="text2" size="50" value="Submit" />
                    <input class="open" type="button" value="Submit" name="submit2" />
                </fieldset>
            </form>
        </div><!--/div-->

        <h3 id="section3"><a href="#">Section 3</a></h3>
        <div>
            <form id="form3" action="form.php" method="post">
                <fieldset class="inside">
                    <input type="text" name="text3" id="text3" size="50" value="Submit" />
                    <input class="open" type="button" value="Submit" name="submit3" />
                </fieldset>
            </form>
        </div><!--/div-->

【问题讨论】：

标签： jquery input focus accordion

【解决方案1】：

$("#accordion").accordion({ header:'h3', active: '#section1', autoheight: false, clearstyle: true, }).bind("change.ui-accordion", function(event,ui) { $("#text1").focus(); });

这不适用于其他子手风琴。因为您正在硬编码要聚焦的文本框的 ID。

可能会在 change.ui-accordion 事件中加入某些东西，但我对它不是很熟悉。你可以使用这样的东西：

    $(document).ready(function() {
        $("div#accordion > h3 > a").click(function(e) { // when we click a link

            e.preventDefault(); // prevent the click from bubbling

            var parenth3 = $(this).parent(); // find the parent h3 the sender is in

            //this selector then finds the first textbox that is in the div adjacent to the parent h3.
            $("#" + parenth3[0].id + " + div > form > fieldset.inside > input[type=text]:first").focus();

        });
    });

这对我来说感觉很hacky。

编辑：另请注意，第 1 节的锚标记未正确关闭。

【讨论】：

如果我有一个保存按钮并且点击保存按钮事件，如果我想设置焦点，如何实现它？

【解决方案2】：

最好像这样使用内置事件的手风琴

    $(".accordion").accordion({
        beforeActivate: function()  {},
        activate: function( event, ui ) {
            $(ui.newPanel).find('input')[0].focus()
         }
    });

姜是最好的

【讨论】：

奇怪的是，如果没有 beforeActivate 功能，它就不起作用

【解决方案3】：

如果只有一个输入需要关注，上述两种方法（.bind("change.ui-accordion"... 和activate: function( event, ui ) {...）就可以工作。我有 3 个文本输入，用户需要能够点击。为了解决这个问题，我使用了：

    $(":input").click(function() {
      $(this).focus();
    });

当然 ":input" 可以更改为您需要的任何内容。

【讨论】：