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

Question

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/

score 4 · Answer 1 · answered May 16 '13 at 05:52

4

Issue in your code is $('.search').focus().tap();

In html you mentioned

 <input name="search" id="search" value="" placeholder="Search Item...." type="search" data-theme="e" />

'Id' should start with '#' not '.'

Modified jsfiddle link is http://jsfiddle.net/aH4QM/4/

Note: To check in fiddle I changed the 'tap'event to'click'

answered May 16 '13 at 05:52

vinothini

2,606
4
27
42

thanks for the reply, your right but focus on search input is not working in opera mobile and iphone as i mentioned... – SaurabhLP May 16 '13 at 05:57

score 0 · Answer 2 · answered May 16 '13 at 05:58

0

when you accessing particular element through id you have to use "#" not "." and when u accessing the element through class name that time you can use ".". Please refer below code.

$(function() {

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

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

});

Thanks,

Siva

answered May 16 '13 at 05:58

SivaRajini

7,225
21
81
128

focus on search input is not working in opera mobile and iphone as i mentioned... – SaurabhLP May 16 '13 at 06:08

score 0 · Accepted Answer · answered May 27 '13 at 08:00

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/

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

3 Answers3