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];