使用 Tab 键时如何更改文本字段选择顺序
Posted
技术标签:
【中文标题】使用 Tab 键时如何更改文本字段选择顺序【英文标题】:How to change text field selection order when using tab key 【发布时间】:2013-03-01 19:20:41 【问题描述】:我还在想如何重新命名这个标题。
无论如何,我的页面上有这个联系表:http://leongaban.com/
点击名称并填写后,您可以tab 转到下一个字段电子邮件。输入电子邮件后,用户很自然地再次进入消息框。
但是由于某种原因,我的选项卡选择一直跳到页面顶部,并且似乎选择了我的投资组合主导航链接。再多几个标签,我又回到了消息文本区域。
这当然一点也不理想,有没有办法可以强制标签选择以正确的顺序排列?即:姓名>电子邮件>消息>验证码>提交
我当前的表单 (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>
【问题讨论】:
【参考方案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
es 设置为 1,因此它们将首先出现,因为它们是唯一具有已定义 tabindex 的。
【讨论】:
【参考方案2】:尝试将tabindex
属性用于您的输入字段。这将让您控制用户可以通过您的页面元素切换的顺序。
可以在here 找到此示例代码,尽管您已经在姓名和电子邮件输入中设置了tabindex
。只需将该属性添加到其余输入中,然后按照您想要的顺序设置它们。
【讨论】:
以上是关于使用 Tab 键时如何更改文本字段选择顺序的主要内容,如果未能解决你的问题,请参考以下文章