5

我正在从这个项目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因为它是一个 jQuery UI 或tagsinput项目使用的东西？或者也许我错了，但到目前为止我在谷歌上没有任何运气，并且在项目的网站上似乎没有任何与此问题相关的内容。

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

关于什么是错的或我如何解决这个问题的任何建议？

4

4 回答 4

7

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

你可能想要

var searchQueryTB = document.getElementsByClassName("TBhandle0F7X")[0];
于 2012-06-28T04:47:16.777 回答
3

除了getElementsByClassName返回数组的问题（因此您需要索引）之外，还有一个问题是所有浏览器都不支持此方法，因此最好使用id属性和document.getElementById().

但是问题仍然存在，即 IE 存在问题focus()，这是一种“惰性”实现，请参阅focus 在 IE 中不起作用，其中包含一些解决方案。

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

于 2012-06-28T05:09:40.937 回答
1

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

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

var searchQueryTB = document.querySelector('.TBhandle0F7X'); // assuming only a single text box with this class
于 2012-06-28T04:50:38.237 回答
1

use getElementsByClassName，结果是一个类似数组的，所以在你的代码searchQueryTB中是一个数组。

解决方案：

document.onload = FocusSearchQueryTextBox();

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

    searchQueryTB && searchQueryTB.focus();
}
于 2012-06-28T04:52:37.423 回答