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

您的代码中的问题是$('.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 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/

在按钮上单击幻灯片并关注jquery mobile中的搜索输入

3 个答案: