Menu
I've got a page w/ a Search field that's meant to work by typing your search term and then hitting enter. This works fine on desktop browsers, but my code that captures the "Enter" button press doesn't work on iPhone (and possibly other mobile browsers).
HTML is a simple input field (which is not inside a FORM element):
<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>
And then I'm binding the keypress in the 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();
}
});*/
You'll notice the two different versions - the first one is the only one that works for me at all, no matter what the browser. I tried the second one based on some other Stack Overflow threads, but it doesn't even work on Firefox, nevermind the iPhone.
I created this fiddle, which doesn't do anything on the iphone: http://jsfiddle.net/tb653201/
395
One way to get around the issues you're having is to wrap your input in a form tag, add a hidden submit button, and then use jQuery's "submit" events to trigger them. Mobile picks up the fact that it's a form and handles the "enter" key press differently than it does in regular typing.
$("#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>See this for more info: https://api.jquery.com/submit/
161
You could test for the return key result in the value but it needs to be in a textarea to catch it
also it's a "framework free" solution but can be used with jQuery as well
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
