При нажатии кнопки слайд и сосредоточьтесь на вводе поиска в jquery mobile

Я сделал этот пользовательский интерфейс с помощью 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/.


focus jquery jquery-mobile opera-mobile
person SaurabhLP    schedule 16.05.2013    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Проблема в вашем коде $('.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'event на 'click'.

person vinothini    schedule 16.05.2013
comment
спасибо за ответ, вы правы, но фокус на поиске не работает в Opera Mobile и iPhone, как я уже упоминал... - person SaurabhLP; 16.05.2013

arrow_upward
0
arrow_downward

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

$(function() {

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

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

});

Спасибо,

Шива

person SivaRajini    schedule 16.05.2013
comment
фокус на поиске не работает в Opera Mobile и iPhone, как я уже упоминал... - person SaurabhLP; 16.05.2013

arrow_upward
0
arrow_downward

Я только что преобразовал 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/

person SaurabhLP    schedule 27.05.2013