在按鈕上單擊幻燈片並專注於jquery mobile中的搜索輸入

Question

我已經用jquery移動了這個UI，在這里我正在做的是在按鈕上單擊搜索輸入並向下滑動以進行搜索...同樣它將集中在輸入框中...

這是我正在使用的腳本，

 $(function() {

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

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

});

我已經在Opera Mobile和iphone上對其進行了測試，但是問題是焦點沒有發生，這意味着如果在focus()上應用了focus() ，則應該顯示瀏覽器鍵盤 ...

我的代碼正確還是其他？ 是純JavaScript是使這項工作的解決方案嗎？

這是一個無效的演示， http：//jsfiddle.net/aH4QM/show/

Answer 1

您代碼中的問題是$('.search').focus().tap();

在HTML中，您提到了

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

'Id'應以'#' not '.'開頭， '#' not '.'

修改后的jsfiddle鏈接為http://jsfiddle.net/aH4QM/4/

注意：要檢查小提琴，我將'tap'事件更改為'click'

Answer 2

通過id訪問特定元素時，必須使用“＃”而不是“”。 當您通過類名訪問元素時，可以使用“。”。 請參考下面的代碼。

$(function() {

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

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

});

謝謝，

濕婆

Answer 3

我剛剛在HTML代碼中將type="search"轉換為type="text" ，並為搜索添加了提交按鈕...

像那樣：-

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