javascript 对象不支持属性或方法“焦点”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11238148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Object doesn't support property or method "focus"
提问by Arrow
I am using the tagsinputtext field on my website from this project.
我正在使用tagsinput这个项目中我网站上的文本字段。
And I am trying to set focus to the text field but it isn't working. It is giving me the following error:
我正在尝试将焦点设置到文本字段，但它不起作用。它给了我以下错误：
Unhandled exception at line 37, column 9 in
LOCALDOMAIN-LINK-REMOVED
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'focus'.
The line (37)that this error is referring to is:
在line (37)这个错误指的是：
searchQueryTB.focus();
My full code is:
我的完整代码是：
document.onload = FocusSearchQueryTextBox();
function FocusSearchQueryTextBox() {
var searchQueryTB = document.getElementsByClassName("TBhandle0F7X");
searchQueryTB.focus();
}
Markup:
标记：
<input type="text" value="" name="SearchQuery" id="tagsinput" class="TBhandle0F7X" />
So I'm assuming it may have something to do with the fact that maybe the text field isn't actually a proper textfieldin that it's a jQuery UI one or something that's used by tagsinputproject? Or maybe I'm wrong, but I haven't had any luck thus far on Google and there doesn't appear to be anything related to this issue on the project's website.
所以我假设它可能与这样一个事实有关，即文本字段实际上并不是一个正确的textfield，因为它是一个 jQuery UI 或tagsinput项目使用的东西？或者也许我错了，但到目前为止我在谷歌上没有任何运气，并且项目网站上似乎没有与此问题相关的任何内容。
I've also tried this in jQuery, but as expected, it didn't work either. Same error.
我也在 jQuery 中尝试过这个，但正如预期的那样，它也不起作用。同样的错误。
Any suggestions as to what is wrong or how I could fix this?
关于出了什么问题或如何解决这个问题的任何建议？
回答by Musa
getElementsByClassNamereturns a collection of DOM elements not an element itself even if there is only one element with class TBhandle0F7X
getElementsByClassName返回一组 DOM 元素而不是元素本身，即使只有一个元素具有类 TBhandle0F7X
You probably want
你可能想要
var searchQueryTB = document.getElementsByClassName("TBhandle0F7X")[0];
回答by Jukka K. Korpela
In addition to the issue that getElementsByClassNamereturns an array (and you would thus need an index), there's the problem that this method is not supported by all browsers, so it is better to use an idattribute and document.getElementById().
除了getElementsByClassName返回数组的问题（因此您需要一个索引），还有一个问题是并非所有浏览器都支持此方法，因此最好使用id属性和document.getElementById().
But the problem remains that IE has issues with focus(), a “lazy” implementation, see focus doesn't work in IEwhich contains some solutions.
但问题仍然是 IE 有问题focus()，一个“懒惰”的实现，see focus 在包含一些解决方案的IE中不起作用。
Additionally, you could consider using the autofocusattribute in HTML markup (supported by modern browsers even when scripting is disabled).
此外，您可以考虑autofocus在 HTML 标记中使用该属性（即使禁用脚本，现代浏览器也支持）。
回答by natlee75
document.getElementsByClassNamereturns a collection of DOM elements so you cannot invoke the DOM element focusmethod on the variable you assigned that collection to. You can assign the element at the first index of the collection to searchQueryTB, but it seems to me (and this could be a completely wrong assumption on my part) that there is only a single text box that you're going to be focusing on so why not just give it an idattribute and use document.getElementById?
document.getElementsByClassName返回 DOM 元素的集合，因此您不能focus对该集合分配给的变量调用 DOM 元素方法。您可以将集合的第一个索引处的元素分配给searchQueryTB，但在我看来（这对我来说可能是一个完全错误的假设）只有一个文本框您要关注所以为什么不给它一个id属性并使用document.getElementById？
If you expect your users to have modern web browsers (basically, Internet Explorer 8+ or any other browser) you can use the querySelectormethod:
如果您希望您的用户拥有现代 Web 浏览器（基本上是 Internet Explorer 8+ 或任何其他浏览器），您可以使用以下querySelector方法：
var searchQueryTB = document.querySelector('.TBhandle0F7X'); // assuming only a single text box with this class
回答by wiky
use getElementsByClassName, the result is an array-like, so in your code searchQueryTBis an array.
use getElementsByClassName，结果是一个类似数组的，所以在你的代码中searchQueryTB是一个数组。
solution:
解决方案：
document.onload = FocusSearchQueryTextBox();
function FocusSearchQueryTextBox() {
var searchQueryTBs = document.getElementsByClassName("TBhandle0F7X"),
searchQueryTB = searchQueryTBs && searchQueryTBs[0];
searchQueryTB && searchQueryTB.focus();
}
