带有 jQuery 的精美滑动表单答案

【问题标题】：Fancy Sliding form with jQuery带有 jQuery 的精美滑动表单
【发布时间】：2013-08-27 19:16:44
【问题描述】：

我正在使用来自codrops 的代码，它工作正常，但是当我删除段落时

并添加一个带有输入但没有的表，我面临这个问题。问题如下：当您使用 TAB 按钮从幻灯片中的最后一个输入移出以移动到下一张幻灯片中的下一个选定输入文本时，下一张幻灯片将是无组织的！

这里是代码的示例没有问题：

<fieldset class="step">
    <legend>Account</legend>
    <p>
        <label for="username">User name</label>
        <input id="username" name="username" />
    </p>
    <p>
        <label for="email">Email</label>
        <input id="email" name="email" placeholder="info@tympanus.net"
        type="email" AUTOCOMPLETE=OFF />
    </p>
    <p>
        <label for="password">Password</label>
        <input id="password" name="password" type="password" AUTOCOMPLETE=OFF
        />
    </p>
</fieldset>

这里是代码有问题的示例：

<table width="100%" border="0">
    <tr>
        <td>
            <label for="username">User name</label>
        </td>
        <td>
            <input name="username" id="username" tabindex="1" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="email">Email</label>
        </td>
        <td>
            <input name="email" type="email" id="email" placeholder="info@tympanus.net"
            tabindex="2" AUTOCOMPLETE=OFF />
        </td>
    </tr>
    <tr>
        <td>
            <label for="password">Password</label>
        </td>
        <td>
            <input name="password" type="password" id="password" tabindex="3" AUTOCOMPLETE=OFF
            />
        </td>
    </tr>
</table>
<p>&nbsp;</p>

不添加最后一行，代码可以工作，但是TAB不行，它会直接跳到下一张幻灯片而不选择同一张幻灯片中的输入。

如何通过在选项卡式表单之间移动来解决此问题，使用 TAB 按钮没有任何问题。

【问题讨论】：

你能发布一个 jsfiddle.net 的例子吗？我猜这是两件事之一： 1. 表格的显示类型与
不同 2. javascript 可能正在尝试选择您已更改为其他内容的特定项目。
我添加到jsfiddle.net jsfiddle.net/amigo_sa/rqWB8/1

标签： javascript jquery html css forms

【解决方案1】：

我只是简单地查看了 codrops 网站，但在我看来，您缺少每组输入字段必须包含的 <fieldset class="step"> ... </fieldset> 标签。尝试放置您的表格 - 我想一定有不止一个，否则你为什么要使用花式滑动？ - 在这些标签内。

【讨论】：

我忘了在代码示例中添加它，但这不是问题。

【解决方案2】：

我找到了解决方案
它在 .js 文件中，替换这一行

$fieldset.children(':last').find(':input').keydown(function(e){

用这条线

$fieldset.children(':last').find(':last:input').keydown(function(e)

因为它要去最后一个孩子，而不是最后一个输入。

【讨论】：