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

user_13774710 0
Viewed 906

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?

htmx jquery javascript
4 Answers

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>
user_153160670

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.

user_177271510

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

You likely need to add e.preventDefault() as well. Edit: and then $("#fform").submit().

user_3036610
Related