对象不支持属性或方法"focus"。

Question

我正在使用这个项目中的tagsinput文本框在我的网站上。我试图将焦点设置到这个文本框，但是它没有生效。它显示了以下错误：

Unhandled exception at line 37, column 9 in
LOCALDOMAIN-LINK-REMOVED
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'focus'.

这个错误所指的是第 37 行：

searchQueryTB.focus();

我的完整代码如下：

document.onload = FocusSearchQueryTextBox();

function FocusSearchQueryTextBox() {
    var searchQueryTB = document.getElementsByClassName("TBhandle0F7X");
    searchQueryTB.focus();
}

标记：

<input type="text" value="" name="SearchQuery" id="tagsinput" class="TBhandle0F7X" />

我猜想可能与文本字段不是一个正确的textfield有关，而是一个被tagsinput项目使用的jQuery UI组件。但是我也可能错了，我在Google上没有找到任何相关的信息，在该项目的网站上也没有找到任何相关的问题。我已经尝试了jQuery，但是结果并没有如预期一样，仍然出现相同的错误。请问您有什么建议或者如何解决这个问题？

- Arrow

---

searchQueryTB 是一个数组。 - UltraInstinct

我正在使用Windows 8 Release Preview中的Internet Explorer 10。 - Arrow

很不幸，我没有类似的环境来测试它，所以我不能确定，但我仍然打赌是一个错误或浏览器怪癖。我在Firefox和Chrome上测试了“tagsinput”对本机focus，并且它没有引发任何异常。你能否在另一个浏览器中运行你的代码并看看会发生什么？ - mgibsonbr

请注意：我也尝试过使用Class和Id（getElementsByClassName()和getElementById()）来执行上述操作。 - Arrow

自从我写下这个问题以来，我已经测试了jQuery文档中能找到的几乎所有函数，唯一有效的jQuery或JavaScript方法是alert("message"); - 其他所有方法都会出现JavaScript运行时错误：无法获取未定义或空引用的属性“focus”-错误。在Internet Explorer 10和9中会出现此错误，而其他浏览器则根本不显示任何错误。 - Arrow

Answer 1

getElementsByClassName 返回的是一组 DOM 元素，即使只有一个带有类名 TBhandle0F7X 的元素也不例外。

你可能想要

var searchQueryTB = document.getElementsByClassName("TBhandle0F7X")[0];

- Musa

---

我刚刚尝试了你的建议，但是它给了我完全相同的错误：在http//site的第37行第9列处未处理的异常0x800a138f - JavaScript运行时错误：无法获取未定义或空引用的属性“focus”。 - Arrow

哦，这是一个好问题。我得瞧瞧tagsinput文件里面的内容。我现在就去看看。 - Arrow

@Musa - 嗯，别担心。非常感谢你的所有帮助和建议 :-) - Arrow

测试在 https://dev59.com/9XE85IYBdhLWcg3wzm5p 上找到的 setTimeout 函数。 - Arrow

我怎么知道哪一个是元素[0]？ - m4l490n

Answer 2

除了 getElementsByClassName 返回一个数组（因此需要使用索引），这种方法在某些浏览器上并不支持，所以最好使用 id 属性和 document.getElementById()。

但问题在于 IE 对 focus() 存在问题，它的实现是“懒惰”的，请参阅 focus doesn't work in IE，其中包含了一些解决方案。

此外，您可以考虑在 HTML 标记中使用 autofocus 属性（即使禁用脚本也支持现代浏览器）。

- Jukka K. Korpela

Answer 3

使用 getElementsByClassName，结果是类似数组的对象，因此在您的代码中 searchQueryTB 是一个数组。

解决方案:

document.onload = FocusSearchQueryTextBox();

function FocusSearchQueryTextBox() {
    var searchQueryTBs = document.getElementsByClassName("TBhandle0F7X"),
        searchQueryTB = searchQueryTBs && searchQueryTBs[0];

    searchQueryTB && searchQueryTB.focus();
}

- wiky

---

谢谢，但很遗憾这对我不起作用。它不会抛出任何异常，但也不会聚焦。 - Arrow

1. getElementsByClassName 不支持 IE9-，您可以使用 getElementById 替代。
2. 您最好确保 searchQueryTB 是一个 DOM 元素。
3. 任何设置了 tabindex 属性的 DOM 元素都可以被聚焦。一些表单元素（如 input、button 等）总是可以被聚焦。

- wiky

Answer 4

document.getElementsByClassName 返回的是 DOM 元素集合，因此您不能在您分配的变量上调用 DOM 元素 focus 方法。您可以将集合中第一个索引处的元素分配给 searchQueryTB，但我认为（这可能完全是我的错误假设），您只会关注单个文本框，所以为什么不给它一个 id 属性并使用 document.getElementById 呢？

如果您期望用户拥有现代的 Web 浏览器（基本上是 Internet Explorer 8+ 或任何其他浏览器），可以使用 querySelector 方法：

var searchQueryTB = document.querySelector('.TBhandle0F7X'); // assuming only a single text box with this class

- natlee75