I got a strange problem. I want to search for a product by clicking enter button. I used e.which == 13 || e.which == 10 with keypress keyup trigger, like below.
<form id="fform" method="get" autocomplete="off" action="/search">
<div class="search-inner-container">
<button @if(isListing) { id="buttonSearchTextListing" } aria-label="unf-search-btn" type="submit"
class="search-button search-keyword" value="Search"></button>
<input
style="cursor: text;"
@if(isListing) {
form='fform'
onclick="!this.form && document.getElementById('fform').submit()"
name="srp-searchText"
} else {
name="srp-searchText"
}
id="searchbar-top"
autocomplete="off"
type="searchText" class="searchbar-text search-input bt1 @uuid" aria-label="Search"
value="@text" placeholder='@l("searchBar.buttonLabel")'
hx-get="/search-autocomplete"
hx-vars="'srp-userInput': getSearchbarVal()"
hx-trigger="keyup changed delay:500ms"
hx-target=".searchbar-suggestion-container"/>
<!-- hx-trigger="keyup changed delay:500ms, focus changed delay:500ms" -->
</div>
</form>
$('.searchbar-text').each(function(){
$(this).on("keyup keypress", function(e) {
if(e.which == 13 || e.which == 10) {
// code
}
});
})
I've tried this on my laptop browser (chrome & Mozilla Firefox). I tried with the element inspector on the desktop/mobile display, it works fine. But when I try it on a mobile phone browser, it doesn't work. When I press enter, it jumps to another section and does not submit the form. This only happens on the product search page on mobile phones but on other pages, it works fine.
*I tried to debug the clicked keyCode on alert when on the homepage it appears the keyCode is 13, but when in product search the alert keycode doesn't appear
if you want to try, just test from a website that I've developed HERE, and try in the desktop - mobile phone browser to search (e.g saw) and click enter
Can anyone explain why this happens?
Simply set type='submit' to the button and set display none. Make sure to wrap the input field and the button in form tags. Then handle the submit.
<form>
<input type='text' placeholder='Search for an item'>
<button type='submit'>Search</button>
</form>
First of all,
using UIEvent.which seems to be a "non-standard." Use KeyboardEvent.keyCode instead.
Also, the reason "type=submit" didn't work is because you used it on a <button> element. They are not technically "input's," so you can use type on it.
If you try using an <input> element, it should work perfectly fine. Something like this should work:
<input aria-label="unf-search-btn" type="submit" class="search-button search-keyword" value="Search"/>
Then assuming you have the <form> element set up, it should work fine.
Your code is working exactly you want in my mobile, try putting return false; on input submit
$('.searchbar-text').each(function(){
$(this).on("keyup keypress", function(e) {
if(e.which == 13 || e.which == 10) {
console.log('Submitted');
}else{
console.log(e.which);
}
return false;
});
});