如何在使用Tab键时更改文本字段选择顺序 [英] How to change text field selection order when using tab key
问题描述
不管怎么说，我在这里在我的页面上有这个联系表单：
a href =http://leongaban.com/ =nofollow> http://leongaban.com/当您点击名称并填写名称时，您可以标签到下一个字段的电子邮件。在输入电子邮件后，用户很自然地再次进入消息框。
然而，由于某种原因，我的选项卡选项一直跳到顶部页面，似乎选择我的投资组合主导航链接。还有几个选项卡，我回到了textarea消息。
这当然不是很理想，有没有一种方法可以强制选项卡选择按正确的顺序？即： Name> Email> Message> Captcha> Submit
我目前的表单（HTML）
< div class =the-form>
< form id =myFormaction =＃method =post>
< div>
< label for =name>您的名称< / label>
< input type =textname =nameid =namevalue =tabindex =1>
< / div>
< div>
< label for =email>您的电子邮件< / label>
< input type =textname =emailid =emailvalue =tabindex =1>
< / div>
< div>
< label for =textarea>消息：< / label>
< / div>
< div>
< textarea cols =40rows =8name =messageid =message>< / textarea>
< / div>
< p>< em>什么是2 + 3？< / em>< / p>
< input type =textname =captchaid =captcha/>
< div>
< input class =submit-buttontype =submitvalue =Submit>
< / div>
< / form>
< / div>
< / footer>
你必须给你的 tabindex ，按照你希望他们去的顺序。
< input type =textname =nameid =namevalue =tabindex =1 >
< input type =textname =emailid =emailvalue =tabindex =2>
< input type =textname =captchaid =captchatabindex =4/>
< input class =submit-buttontype =submitvalue =Submittabindex =5>
等。
现在你有两个 tabindex es设置为1，因此它们将首先出现，因为它们是唯一具有已定义的tabindex的。
I'm still trying to think up how to re-word this title.
Anyways so I have this contact form on my page here: http://leongaban.com/
When you click in name and fill it out you can then tab to the next field email. After entering in email, it is natural for the user to tab again into the message box.
However for some reason my tab selection jumps all the way up to the top of the page and seems to select my portfolio main nav link. A few more tabs and I'm back down into the message textarea.
This of course is not ideal at all, is there a way I can force the tab selections to go in the correct order? ie: Name > Email > Message > Captcha > Submit
My current form (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>
You have to number your tabindex in the order you'd like them to go.
<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">
etc.
Right now you have two tabindexes set to 1, so they will go first, as they are the only ones with a defined tabindex.
这篇关于如何在使用Tab键时更改文本字段选择顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
