Saturday, 25 December 2021

Why submit input by clicking the enter button not work on mobile phone browsers?

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 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 website that i've develop HERE, and try in the desktop - mobile phone browser to search (e.g saw) and click enter

Can anyone explain why this happens?



from Why submit input by clicking the enter button not work on mobile phone browsers?

No comments:

Post a Comment