Нажмите кнопку слайд и сфокусируйтесь на поиске ввода в jquery mobile

Question

Я сделал этот пользовательский интерфейс с JQuery Mobile, здесь я делаю на нажатие кнопки поиска ввода слайд вниз для поиска... и аналогично он будет сосредоточен на поле ввода...

Это сценарий, который я использую,

 $(function() {

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

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

});

Я проверил его на Opera Mobile и iphone, но проблема в том, что фокус не происходит, значит, он должен показывать клавиатуру браузера, если применяется focus() в теме...

Мой код правильный или что-то еще? Является ли чистый Javascript решением для этой работы?

Вот неработающая демонстрация этого, http://jsfiddle.net/aH4QM/show/

Answer 1

Я только что преобразовал type="search" в type="text" в мой HTML-код и добавил кнопку отправки для поиска...

Как это:-

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

И JS, как обычно, простой для фокуса: -

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

Код теперь работает для меня... http://jsfiddle.net/aH4QM/14/show/

Answer 2

Проблема в вашем коде $('.search').focus().tap();

В HTML вы упомянули

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

'Id' должен начинаться с '#' not '.'

Модифицированная ссылка jsfiddle: http://jsfiddle.net/aH4QM/4/

Примечание: чтобы проверить в скрипке, я изменил 'tap'событие в'click'

Answer 3

Когда вы обращаетесь к определенному элементу через идентификатор, вы должны использовать "#", а не "." и когда вы обращаетесь к элементу через имя класса, вы можете использовать ".". Пожалуйста, обратитесь ниже код.

$(function() {

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

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

});

Спасибо,

Сива