jQuery: Set Focus on an Input Control

Recently, while working on a mobile version of a Website, I was asked to hide the search bar that's traditionally at the top of a web page, and replace it with a clickable button. When clicked, this button would in turn reveal the search bar. The idea behind this user interaction was to save valuable screen real estate by hiding the search bar, which is only occasionally used.

I used CSS (display:none) to hide the search bar initially, and to display the button that would reveal it.

Here's a little legend to explain what my elements are in the examples below:

  • #search-box-trigger = the clickable button that will show the search box
  • #search-box = the div containing the search form
  • #searchText = the text input field in the search form

Next I used a little jQuery to make the search bar appear on click of the button:


        $('#search-box-trigger').click(function () {
            $('#search-box').toggle(); 
              // toggle is a jquery function that detects the default 
              // display of an element and switches it to its opposite, 
              // so from NONE to BLOCK, or from BLOCK to NONE
            $(this).toggle(); 
              // THIS refers to the element you first call with your function, 
              // in this case #search-box-trigger
        });

However, just hiding the button and showing the search box required the user to then click into the search box again. Since the user already showed intent at searching, by clicking the button, why not give the search bar "focus" (meaning, place the cursor inside the search bar) for the user, saving them an extra step, and causing their mobile device's keypad to come up so he can start entering their search term?

By adding this line, I give the search text input field focus:


      $("#search-box #searchText").focus();

So the final, complete jquery snippet looks like this:


        $('#search-box-trigger').click(function () {
            $('#search-box').toggle();
            $(this).toggle(); 
            $("#search-box #searchText").focus();
        });

Additional Resources

Comments

An impressive share! I have just forwarded this onto a co-worker who has been conducting a little research on this. And he in fact ordered me lunch because I discovered it for him... lol. So let me reword this.... Thank YOU for the meal!! But yeah, thanks for spending time to talk about this issue here on your website.

Undeniably believe that which you stated. Your favorite justification appeared to be on the internet the simplest thing to be aware of. I say to you, I certainly get annoyed while people think about worries that they just do not know about. You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people can take a signal. Will probably be back to get more. Thanks

Undeniably believe that which you said. Your favorite justification appeared to be on the net the simplest thing to be aware of. I say to you, I certainly get irked while people think about worries that they plainly do not know about. You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people could take a signal. Will likely be back to get more. Thanks

Pages

Add new comment