-->

如何使用Tab键时,更改文本字段选择顺序(How to change text field sele

2019-09-29 12:22发布

我还在试图想出如何重新字这个称号。

不管怎么说,所以我有这样的联系表格我的网页上的位置: http://leongaban.com/

当您在名称点击并填写你可以再选项卡下一个域的电子邮件。 进入电子邮件后,是很自然的用户选项卡再次到消息框。

但是由于某种原因,我的标签选择跳一路攀升到页面的顶部,似乎选择我的投资组合主要资产净值链接。 一些更多的标签,我回落到消息文本区域。

这当然是不理想可言,是有办法,我可以强制标签选择正确的顺序去? 即: 名称>电子邮件>邮件>验证码>提交

我目前的形式(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 ES,所以他们会先走,因为他们是唯一的一个定义的tabindex。



Answer 2:

尝试利用tabindex属性的输入字段。 这将让你控制的顺序,用户可以通过页面元素标签。

此示例代码可以发现在这里 ,虽然你已经设置tabindex上的姓名和电子邮件的投入。 只是,属性添加到您输入的休息和设定他们你想的顺序。



文章来源: How to change text field selection order when using tab key