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?

What browser are you using? From your comment in the answers below, it seems you might be using one that doesn't support `focus` natively. — mgibsonbr, Jun 28 '12 at 04:57
I am using Internet Explorer 10 in Windows 8 Release Preview. — Arrow, Jun 28 '12 at 04:59
Unfortunatly I don't have a similar environment to test it, so I can't be sure, but I'm still betting on a bug or browser quirk. I tested "tagsinput" for the native `focus` on Firefox and Chrome and it didn't raise any exception. Could you please run your code in another browser and see what happens? — mgibsonbr, Jun 28 '12 at 05:10
Please note: I have also tried the above with both Class and Id (getElementsByClassName() and getElementById()) — Arrow, Jun 28 '12 at 05:10
@mgibsonbr - Thank you. I tested in Chrome, Firefox, Safari, Maxthon and Opera and I get the same errors. Since I'm using IE 10, I decided to put it into quirks mode with F12 Dev'er Tools and tried all the different Browser version options including Quirks mode and Standards mode and IE5 Quirks mode and even IE10 Compatibility mode. No luck yet. — Arrow, Jun 28 '12 at 05:24
I've tested just about every function I could find in the jQuery docs since I wrote this question, and the only thing that works jQuery or javascript-wise is `alert("message");` - everything else fails with a JavaScript runtime error: Unable to get property 'focus' of undefined or null reference - error. In internet explorer 10, and 9. Every other browser just doesn't show any error at all. — Arrow, Jul 02 '12 at 17:02

score 8 · Accepted Answer · answered Jun 28 '12 at 04:47

8

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

answered Jun 28 '12 at 04:47

Musa

96,336
17
118
137

1

I just tried your suggestion and it gave me the exact same error: `Unhandled exception at line 37, column 9 in http//site 0x800a138f - JavaScript runtime error: Unable to get property 'focus' of undefined or null reference` – Arrow Jun 28 '12 at 04:49
@Jason is `focus` a native function, or do you mean jQuery's [focus function](http://api.jquery.com/focus/)? In the latter case, see my answer. (*Edit*: NVM, just saw [this](http://www.w3schools.com/jsref/met_html_focus.asp)) – mgibsonbr Jun 28 '12 at 04:52
When I try the following code: `var searchQueryTB = document.getElementsById("TBhandle0F7X");` (and change the textfield element from class to id) - it throws this exception: `Unhandled exception at line 36, column 9 in http://localhost:5917/Home.cshtml 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'getElementsById'` – Arrow Jun 28 '12 at 04:52
@Jason its `getElementById` notice the lack of `s` – Musa Jun 28 '12 at 04:54
I was referring to the native function, though I have tested each alternative with both jQuery and JavaScript and have received the exact same error each time. – Arrow Jun 28 '12 at 04:57
Yep, @Musa - Good spot! I noticed that too just after I posted the comment. I changed it and it just gave me the original exception which is in my question unfortunately. – Arrow Jun 28 '12 at 04:58
@Jason are you sure there is a `class="TBhandle0F7X"` or `id="TBhandle0F7X"` in your markup, can you post the relevant markup? – Musa Jun 28 '12 at 05:00
Sure Musa. I am positive: `` (Also added to question) – Arrow Jun 28 '12 at 05:01
Oohw, that's a good question. I'll have to peek inside the tagsinput file and see. I'll do that now. – Arrow Jun 28 '12 at 05:09
@Musa - Page Inspector shows that the text field is _not_ in a Frame. – Arrow Jun 28 '12 at 05:17
@Jason I'm out of ideas, except its a bug in IE10 which wouldn't surprise anyone. I wasn't able to duplicate this on chrome or firefox, see what happens if you use another browser. – Musa Jun 28 '12 at 05:26
@Musa - Well, no worries. Thank you heaps for all your help and suggestions :-) – Arrow Jun 28 '12 at 05:30
I've tried this with Chrome, Safari, IE 7, 8, 9, 10 (Standard, Quirks and Compatibility mode) and also Opera and Maxthon. For some strange reason it just doesn't work in any browser (but I have confirmed that many other websites are using the .focus() function in jQuery and JavaScript and are working fine in my browsers.) So confusing. But yeah, thanks heaps :) – Arrow Jun 28 '12 at 05:32
Testing setTimeout function found on http://stackoverflow.com/questions/2600186/focus-doesnt-work-in-ie – Arrow Jun 28 '12 at 05:32
How do I know which one is element [0]? – m4l490n Nov 08 '19 at 00:48
The assumption is there is only one, also I believe its the first one encountered in the DOM – Musa Nov 08 '19 at 12:24

score 3 · Answer 2 · edited May 23 '17 at 10:34

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).

score 2 · Answer 3 · answered Jun 28 '12 at 04:52

2

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();
}

answered Jun 28 '12 at 04:52

wiky

6,178
3
16
10

Thank you, but unfortunately this doesn't work for me. It doesn't throw any exceptions but it doesn't focus either. – Arrow Jun 28 '12 at 05:06
1)`getElementsByClassName` is not support in IE9-. you can use `getElementById` instead. 2)You'd better make sure `searchQueryTB` is an DOM Element or not. 3)Any DOM Element has set `tabindex` attribute can be focus. some form Element(input, button...) always can be focus. – wiky Jun 28 '12 at 05:49

score 1 · Answer 4 · answered Jun 28 '12 at 04:50

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

Object doesn't support property or method "focus"

4 Answers4