How to set focus on a seach box ?

Question

Hi Guys,

I'm trying to work out how to set the focus on a search box that I have placed on the start up screen of my HTML app.

I'd like it focus there when ever the app returns to the Browse Screen, or perhaps when the screen is refreshed, after performing the search.

I've tried adding this code to the post render code of the search box:  $(element).attr('id', 'SearchBox');
Then I've tried adding this to the on-click event of a button within the Post Render code: $('#SearchBox').focus();

But it I must be missing something, because nothing happens.

Has anyone looked at setting focus in the HTML client?

Thanks All.

Thanks All.

Answer 1

Hey John,

If you're setting focus() in the postRender, you will probably want to wrap the call in a setTimeout call. A non-trivial amount of DOM work may be done by LS and/or JQueryMobile after the postRender and the setTimeout will account for that.  Moreover, I know that IE in particular has issues with setting focus if the element is not visible. 

The resulting code would look something like this:

    setTimeout(function () {
        if ($('#searchBox').is(':visible')) {
            $('#searchBox').focus();
        }
    }, 300);

This worked for me on a quick sample, but please let me know if doesn't solve the problem for you.

Thanks.

Joe