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/
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/
вы можете проверить результат ключа возврата в значении, но он должен быть в 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>
попробуй такое
$('#search').keyup(function(event) {
if (event.which == 13) {
search = $('#search').val();
generateView();
}
});
еще одна вещь, которую я считаю, вы должны сделать, если у вас есть поисковый ввод, это дать ему 'search' тип. Затем вы также используете другие функции типа ввода поиска, такие как datalists.