Javascript的focus()和select()奇怪问题

Question

我正在处理一个表单，在ie浏览器中遇到了null或非对象错误。

<form action="#" method="post" name="adv_search">

<input class="inputbox" type="text" name="keyword1" value="none" id="keyword1"/>
</form>

<script>
document.adv_search.keyword1.focus();
document.adv_search.keyword1.select();
</script>

//如果我使用

<script>
var key1 = document.getElementById('keyword1');
   key1.focus();
   key1.select();
</script>

//一切正常

我希望理解为什么。 我希望在不使用输入字段的id标签的情况下使其工作。

提前感谢。

---

document.formname.fieldname.focus(); 和 document.formname.fieldname.select(); 不应该起作用吗？

- chris

Answer 1

您的例子对我有效，但如果我添加另一个具有相同名称的字段：

<input type="text" name="keyword1" />
<input type="text" name="keyword1" />

如果使用document.adv_search.keyword1.focus()，会出现你指定的错误。

原因是：

document.adv_search.keyword1

是这种语法的快捷方式（它可以追溯到DOM Level 0和Netscape 2时代！）：

document.forms.adv_search.elements.keyword1

顺便提一下，最好使用完整的语法，而不是依赖于‘document’和‘form’对象的名称索引行为：如果HTMLDocument或HTMLFormElement添加了新方法，可能会与您正在使用的控件名称冲突。当您使用document.forms或form.elements集合时，这个问题会较小。此外，IE错误地将所有名称和ID都转储到“document”中，因此如果您有一个具有id =“adv_search”的元素以及一个名称为该名称的表单，则document.adv_search将返回错误的元素。

无论如何，当您像这样通过名称访问元素时，DOM级别0脚本方法的行为略微奇怪。如果有一个匹配的元素，您将获得一个独立的对象。另一方面，如果有多个元素，则会返回一个对象列表。你不能在类似数组的列表上调用focus（）或select（），这就是为什么会出现错误的原因；当列表被返回时，你必须做类似keyword1 [0] .focus()的事情。

因此，您必须决定是否要使用老式的DOM级别0方法来访问您的表单控件-在这种情况下，您必须处理单个或多个控件的探测-或者转向由“DOM级别1”介绍的基于ID的方法：

document.getElementById('keyword1').focus();

基于ID的方法通常需要更多的打字（在脚本中和为所有希望以此方式访问的元素添加ID，如果它们还没有），但它们简单明了，没有歧义。（此外，您可以删除<form>本身上的name。）

- bobince

---

你是对的。我正在处理的代码确实有两个同名字段。 - chris

Answer 2

最好的方法是使用ID，但如果你想使用名称，可以使用getElementsByName。

在这种情况下，代码可能如下所示：

<script>
   // retrieves array of objects with the name 'keyword1' 
   // and takes the first one
   var key1 = document.getElementsByName('keyword1')[0]; 
   key1.focus();
   key1.select();
</script>

- Michael Haren

---

忘了提到使用 getElementsByName 会出现错误 "对象不支持此属性或方法"。 - chris