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

Question

我还在想如何改写这个标题。

无论如何我在我的页面上有这个联系人表单:http://leongaban.com/

当你点击名字并填写它，你可以然后标签到下一个字段的电子邮件。输入电子邮件后，用户很自然地会再次进入消息框。

然而，由于某些原因，我的选项卡选择一直跳到页面顶部，似乎选择了我的投资组合主导航链接。再加几个标签，我就回到了消息文本区。

这当然是不理想的，有一种方法，我可以强制选项卡选择在正确的顺序?即:Name> Email> Message> Captcha> Submit

我当前的表单(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">

等。

现在您有两个tabindex设置为1，因此它们将首先执行，因为它们是唯一具有已定义tabindex的。

Answer 2

尝试使用tabindex属性为您的输入字段。这将允许您控制用户在页面元素中使用制表符的顺序。

虽然您已经在名称和电子邮件输入上设置了tabindex，但是可以在这里找到示例代码。只需将该属性添加到其他输入中，并按您喜欢的顺序设置它们。