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

I got a strange problem. I want search 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 >
    <button @if(isListing) { id="buttonSearchTextListing" } aria-label="unf-search-btn" type="submit"
         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"  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). I tried with the element inspector on the desktop/mobile display, it works fine. But why when on a mobile phone browser it doesn't work. When I press enter it it jumps to another section. not submit the form. And this only happens on the product search page and on mobile phones, on other pages it works fine.

Can anyone explain why this happen?

CodePudding user response：

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>

CodePudding user response：

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"  value="Search"/>

Then assuming you have the <form> element set up, it should work fine.