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.

我创建了这个 fiddle，它对 iphone 没有任何作用：http://jsfiddle.net/tb653201/

Answer 1

解决您遇到的问题的一种方法是将您的输入包装在表单标签中，添加一个隐藏的提交按钮，然后使用 jQuery 的 "submit" 事件来触发他们。 Mobile 接受了它是一种形式的事实，并以不同于常规打字的方式处理 "enter" 按键。

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

Answer 2

您可以在值中测试 return 键结果，但它需要在文本区域中才能捕获它

它也是一个 "framework free" 解决方案，但也可以与 jQuery 一起使用

document.getElementById('search').addEventListener('keyup', checkValue);

function checkValue(event){
  var input = event.target;
  var splitedText = input.value.split(/\n/g);
  input.value = splitedText[0];
  if(splitedText.length> 1)
    alert('enter or whatever was pressed');
}

textarea.input{
  overflow: hidden;
  resize: none;
}

<html>
  
  <body>
  
    <textarea id="search" class="input" placeholder="search" cols="30" rows="1" wrap="off"></textarea>
    
  </body>
</html>

Answer 3

试试这个

$('#search').keyup(function(event) {
    if (event.which == 13) {   
        search = $('#search').val();    

        generateView();
    }
});

Answer 4

我认为你应该做的另一件事是，如果你有一个搜索输入，就是给它一个 'search' 类型。然后，您还可以利用搜索输入类型的其他功能，例如数据列表。

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

JQuery: Capture Enter + Done/Return on iPhone

iphone

jquery

keypress