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/

Answer 2

您可以测试值中的返回键结果，但它需要在textarea中才能捕获它

它也是一个免费的框架＆＃34;解决方案，但也可以与jQuery一起使用

＆＃13;

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');
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个

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

        generateView();
    }
});

Answer 4

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

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

4 个答案: