Question

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

并添加一个包含输入且没有＆lt;“p”＆gt;的表格时，我面对这个问题。问题如下：当您从幻灯片中的最后一个输入移出时，使用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

我只是简单地查看了codrops网站，但在我看来，你错过了必须包含每组输入字段的<fieldset class="step"> ... </fieldset>标签。尝试并放置你的表 - 我想那里必须多于一个，否则你为什么要使用fancysliding？ - 在这些标签内。

Answer 2

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

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

这一行

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

因为它是最后一个孩子而不是最后一个孩子。

与jQuery的花式滑动形式

2 个答案: