Object doesn't support property or method "focus"

Question

I am using the tagsinput text field on my website from this project.

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:

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 textfield in that it's a jQuery UI one or something that's used by tagsinput project? 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.

I've also tried this in jQuery, but as expected, it didn't work either. Same error.

Any suggestions as to what is wrong or how I could fix this?

Answer 1

getElementsByClassName returns a collection of DOM elements not an element itself even if there is only one element with class TBhandle0F7X

You probably want

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

Answer 2

In addition to the issue that getElementsByClassName returns 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 id attribute and document.getElementById().

But the problem remains that IE has issues with focus(), a “lazy” implementation, see focus doesn't work in IE which contains some solutions.

Additionally, you could consider using the autofocus attribute in HTML markup (supported by modern browsers even when scripting is disabled).

Answer 3

use getElementsByClassName, the result is an array-like, so in your code searchQueryTB is an array.

solution:

document.onload = FocusSearchQueryTextBox();

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

    searchQueryTB && searchQueryTB.focus();
}

Answer 4

document.getElementsByClassName returns a collection of DOM elements so you cannot invoke the DOM element focus method 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 id attribute and use document.getElementById?

If you expect your users to have modern web browsers (basically, Internet Explorer 8+ or any other browser) you can use the querySelector method:

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