IE 中的选项卡顺序问题，表单中字段的初始 Javascript select
[英]Tab order issue in IE with initial Javascript select of field in form
问题描述
I'm trying to achieve the following behaviour in html: user is presented with a form involving several text fields.
我试图在 html 中实现以下行为：向用户呈现一个包含多个文本字段的表单。 The fields are populated with default values, but in many cases the user will wish to enter their own.这些字段填充了默认值，但在许多情况下，用户希望输入自己的值。 When the page loads, the value in the first field is selected, so the user can either replace it by simply starting to type and tabbing out to the next field, or simply leave it and tab out.当页面加载时，第一个字段中的值被选中，因此用户可以通过简单地开始键入并跳出到下一个字段来替换它，或者简单地离开它并跳出。 Here's a pared down example of what I have:这是我所拥有的精简示例：
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello"/><br/>
<input value="goodbye"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
This works in Chrome (and Firefox I believe, but I don't have it here).这适用于 Chrome（我相信 Firefox，但我这里没有）。 In IE, the field is selected as intended, but when the user hits tab, the browser tabs out to its address bar rather than to the goodbye field.在 IE 中，该字段是按预期选择的，但是当用户点击选项卡时，浏览器会跳到其地址栏而不是再见字段。 If I replace the select with a simple focus, like如果我用一个简单的焦点替换 select，比如
<body onload="document.getElementById('helloField').focus()">
the tabbing is okay in all browsers, but this isn't what I want.选项卡在所有浏览器中都可以，但这不是我想要的。 I want the user to be able to start typing right away to replace the default value.我希望用户能够立即开始输入以替换默认值。
Anyone have any ideas?有人有想法么？
Thanks.谢谢。
2 个解决方案
解决方案1
6 已采纳 2009-03-10 04:29:25
Focus, then select.聚焦，然后select。
Also consider putting the code in a script block directly after the input in question.还可以考虑将代码直接放在有问题的输入之后的脚本块中。 If you have a bunch of images on the page, document.onload can fire quite a lot later, and the last thing you want is to be typing away in an input box when onload fires and hijacks your focus (making you delete the contents of the box).如果页面上有一堆图像，document.onload 可能会在很久以后触发，而您最不想做的就是在 onload 触发并劫持您的焦点时在输入框中输入内容（使您删除盒子）。
<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
var hello= document.getElementById('helloField');
hello.focus();
hello.select();
</script>
解决方案2
1 2009-03-09 22:16:11
Try setting the tab order of the fields using tabindex:尝试使用 tabindex 设置字段的 tab 顺序：
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello" tabindex="1" /><br/>
<input value="goodbye" tabindex="2" /><br/>
<input type="submit" value="Submit" tabindex="3" />
</form>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.