JQuery: захват Enter + готово/возврат на iPhone

у меня есть страница с полем поиска, которое должно работать, введя поисковый запрос, а затем нажав enter. Это отлично работает в настольных браузерах, но мой код, который захватывает кнопку "Ввод", не работает на iPhone (и, возможно, других мобильных браузерах).

HTML-это простое поле ввода (которое не находится внутри элемента формы):

<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>

и затем я связываю нажатие клавиши в документе.готовы:

$(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();
    }
});*/

Вы заметите два разных версии-первая - единственная, которая работает для меня вообще, независимо от того, какой браузер. Я попробовал второй, основанный на некоторых других потоках переполнения стека, но он даже не работает в Firefox, независимо от iPhone.

Я создал эту скрипку, которая ничего не делает на iphone:http://jsfiddle.net/tb653201/

7
iphone jquery keypress

4 ответов

один из способов обойти проблемы, которые у вас возникли, - обернуть ввод в тег формы, добавить скрытую кнопку отправки, а затем использовать события "отправить" jQuery для их запуска. 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/

3

вы можете проверить результат ключа возврата в значении, но он должен быть в textarea, чтобы поймать его

также это" рамочное бесплатное " решение, но может использоваться и с 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>
2

попробуй такое

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

        generateView();
    }
});
0

еще одна вещь, которую я считаю, вы должны сделать, если у вас есть поисковый ввод, это дать ему 'search' тип. Затем вы также используете другие функции типа ввода поиска, такие как datalists.

0