JQuery:在 iPhone 上捕获 Enter + 完成/返回

Question

我有一个带有搜索字段的页面，可以通过输入搜索词然后按 Enter 键来工作。这在桌面浏览器上运行良好，但捕获“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 中绑定(bind)按键:

$(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 了。

我创建了这个 fiddle ，它在 iPhone 上没有执行任何操作:http://jsfiddle.net/tb653201/

Answer 1

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

$("#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/