为什么点击回车按钮提交输入在手机浏览器上不起作用？

Question

. Answers to this question are eligible for a +50 reputation bounty. frankfurt is looking for an :

Please help me solving this problem, it's hard for me to debugging because it;s only happens on mobile phone browser only

I got a strange problem. I want to search for a product by clicking enter button. I used e.which == 13 || e.which == 10 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 (eg saw) and click enter

Can anyone explain why this happens?

Answer 1

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>

Answer 2

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.

Answer 3

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;
        });
    });

Answer 4

You likely need to add e.preventDefault() as well.