Question

我在project上使用我网站上的tagsinput文字字段。

我正在尝试将焦点设置到文本字段，但它无效。它给了我以下错误：

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

此错误所指的line (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之一项目？或许我错了，但到目前为止我还没有在谷歌上运气，并且在该项目的网站上似乎没有任何与此问题有关的内容。

我也在jQuery中试过这个，但正如预期的那样，它也没有用。同样的错误。

有关错误或如何解决此问题的任何建议？

Answer 1

getElementsByClassName返回DOM元素的集合，而不是元素本身，即使只有一个元素具有类TBhandle0F7X

你可能想要

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

Answer 2

除了getElementsByClassName返回一个数组的问题（因此你需要一个索引）之外，还有一个问题是所有浏览器都不支持这种方法，因此最好使用{{1 }}}和id。

但问题仍然是IE存在document.getElementById()问题，这是一个“懒惰”的实现，请参阅focus doesn't work in IE，其中包含一些解决方案。

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

Answer 3

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

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

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

Answer 4

使用getElementsByClassName，结果类似于数组，所以在您的代码searchQueryTB中是一个数组。

溶液：

document.onload = FocusSearchQueryTextBox();

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

    searchQueryTB && searchQueryTB.focus();
}

对象不支持属性或方法“焦点”

4 个答案: