如何在使用Tab键时更改文本字段选择顺序

Question

我还在想着如何重新说出这个标题.

无论如何,所以我在这个页面上有这个联系表格:http://leongaban.com/

当您单击名称并填写它时,您可以选择标记到下一个字段电子邮件.输入电子邮件后,用户很自然地再次进入消息框.

但是由于某种原因,我的标签选择一直跳到页面顶部,似乎选择了我的投资组合主导航链接.还有一些标签,我回到了短信textarea.

这当然不是理想的,有没有办法可以强制选项卡选择按正确顺序排列？即:名称>电子邮件>消息>验证码>提交

我目前的表格(HTML)

<div class="the-form">
            <form id="myForm" action="#" method="post">

            <div>
                <label for="name">Your Name</label>
                <input type="text" name="name" id="name" value="" tabindex="1">
            </div>

            <div>
                <label for="email">Your Email</label>
                <input type="text" name="email" id="email" value="" tabindex="1">
            </div>

            <div>
                <label for="textarea">Message:</label>
            </div>

            <div>
                <textarea cols="40" rows="8" name="message" id="message"></textarea>
            </div>

            <p><em>Hi, what is 2 + 3?</em></p>
            <input type="text" name="captcha" id="captcha" />

            <div>
                <input class="submit-button" type="submit" value="Submit">
            </div>

            </form>
        </div>

    </footer>

Answer 1

您必须tabindex按照您希望的顺序为您编号.

<input type="text" name="name" id="name" value="" tabindex="1">
<input type="text" name="email" id="email" value="" tabindex="2">
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea>
<input type="text" name="captcha" id="captcha" tabindex="4"/>
<input class="submit-button" type="submit" value="Submit" tabindex="5">

等等

现在你有两个tabindexes设置为1,因此它们将首先出现,因为它们是唯一具有已定义tabindex的.