JQuery:在iPhone上捕获Enter + Done/Return

Question

我有一个带有搜索字段的页面,可以通过输入搜索字词然后点击输入来工作.这在桌面浏览器上工作正常,但是我的代码捕获"Enter"按钮按下在iPhone(以及可能的其他移动浏览器)上不起作用.

HTML是一个简单的输入字段(不在FORM元素中):

<div class="col-xs-12 col-sm-3 action-row padding pull-right xs-margin-up">
    <span class="k-textbox k-button k-space-left col-xs-12 search-box">
        <i class="fa-icon-search"></i>
        <input id="search" placeholder="Search" />
    </span>
</div>

然后我绑定了document.ready中的按键.

$(this).keypress(function(event) {
    if ($('#search').is(":focus") && event.which == 13) {   
        search = $('#search').val();    

        generateView();
    }
});

/*$('#search').bind('keypress', function(e) {
    if (e.which == 13) {    
        search = $('#search').val();    

        generateView();
    }
});*/

您会注意到两个不同的版本 - 第一个版本是唯一一个适合我的版本,无论浏览器是什么.我尝试了基于其他一些Stack Overflow线程的第二个,但它甚至不能在Firefox上运行,也没关注iPhone.

我创造了这个小提琴,它在iphone上没有做任何事情:http://jsfiddle.net/tb653201/

Answer 1

解决您遇到的问题的一种方法是将您的输入包装在一个表单标签中，添加一个隐藏的提交按钮，然后使用 jQuery 的“提交”事件来触发它们。Mobile 发现它是一个表单，并且处理“输入”键的方式与常规打字不同。

$("#myform").on("submit", function(event){
  event.preventDefault();
  // Your custom search functions here
});

#myform input[type='submit'] { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="col-xs-12 col-sm-3 action-row padding pull-right xs-margin-up">
  <span class="k-textbox k-button k-space-left col-xs-12 search-box">
    <i class="fa-icon-search"></i>
    <form id="myform" action="#">
      <input id="search" placeholder="Search" />
      <input type="submit" value="">
    </form>
  </span>
</div>

有关更多信息，请参阅：https : //api.jquery.com/submit/