javascript - 带有 jQ​​uery 的精美滑动表单

Question

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

并添加一个带有输入但没有 <"p"> 的表，我遇到了这个问题。问题如下：当您使用 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 按钮没有任何问题。

Answer 1

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

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

用这条线

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

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

Answer 2

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