jqueryjquery-mobilefocusopera-mobile

On button click slide and focus on search input in jquery mobile


I have made this UI with jquery mobile, here i am doing is on button click a search input slide down for search... and likewise it will focus on the input box...

This is the script i am using,

 $(function() {

    $( ".opensearch" ).on( 'tap', tapHandler );

    function tapHandler( event ) {
      $('.search_field').slideToggle();
      setTimeout(function(){
         $('.search').focus().tap();
        },0);
    }

});

I have tested it on Opera Mobile and iphone but the problem is that the focus doesnt happen means it should show the browser keyboard if applied focus() on it...

Is my code correct or something else? Is pure javascript is the solution for making this work?

Here is a non-working demo of it, http://jsfiddle.net/aH4QM/show/


Solution

  • I have just converted type="search" to type="text" in my html code and added a submit button for the search...

    Like that:-

    <form>
          <input name="search" class="search" value="" placeholder="Search Item...." type="text" data-theme="e">
          <input type="submit" value="Search" data-mini="false" data-icon="search" data-iconpos="notext" data-theme="c"  />
    </form>
    

    And JS as usual a simple one for focus:-

    $( ".opensearch" ).on( 'click', tapHandler );
    function tapHandler( event ) {
         $('.search_field').toggle();
         $('.search').focus();
    }
    

    The code is now working for me... http://jsfiddle.net/aH4QM/14/show/