Question

我正在尝试在html中实现以下行为：向用户显示涉及多个文本字段的表单。字段使用默认值填充，但在许多情况下，用户希望输入自己的字段。当页面加载时，第一个字段中的值被选中，因此用户可以通过简单地开始键入和标签到下一个字段来替换它，或者只是将其保留并标签输出。这是我所拥有的一个简单的例子：

<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>

这适用于Chrome（和我相信的Firefox，但我没有在这里）。在IE中，该字段按预期选择，但是当用户点击选项卡时，浏览器会选中其地址栏而不是再见字段。如果我用简单的焦点替换选择，比如

<body onload="document.getElementById('helloField').focus()">

所有浏览器中的标签都没问题，但这不是我想要的。我希望用户能够立即开始输入以替换默认值。

有人有什么想法吗？

感谢。

Answer 1

焦点，然后选择。

还要考虑在有问题的输入后直接将代码放在脚本块中。如果你在页面上有一堆图像，document.onload可能会在很长一段时间后触发，你想要的最后一件事就是在onload触发并劫持你的焦点时在输入框中输入（让你删除你的内容）方框）。

<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
    var hello= document.getElementById('helloField');
    hello.focus();
    hello.select();
</script>

Answer 2

尝试使用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>

IE中的Tab键顺序问题，表单中的初始Javascript选择字段

2 个答案: