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

Question

我遇到了一个奇怪的问题。我想通过单击输入按钮来搜索产品。我使用e.which == 13 || e.which == 10 和keypress keyup 触发器，如下所示。

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

我已经在我的笔记本电脑浏览器（chrome 和 Mozilla Firefox）上尝试过这个。我尝试在桌面/移动显示器上使用元素检查器，它工作正常。但是当我在手机浏览器上尝试时，它不起作用。当我按下回车键时，它会跳转到另一个部分并且不提交表单。这只发生在手机的产品搜索页面上，但在其他页面上，它可以正常工作。

*我尝试在主页上显示 keyCode 为 13 时在警报上调试单击的 keyCode，但在产品搜索中未出现警报键码

如果你想尝试，就从我开发的一个网站HERE测试，然后在桌面-手机浏览器中搜索（例如saw）并点击进入

谁能解释为什么会这样？

Answer 1

只需将type='submit' 设置为按钮并设置为无显示。确保将输入字段和按钮包装在表单标签中。然后处理提交。

<form>
  <input type='text' placeholder='Search for an item'>
  <button type='submit'>Search</button>
</form>

Answer 2

首先，

使用UIEvent.which 似乎是“非标准”。请改用KeyboardEvent.keyCode。
此外，“type=submit”不起作用的原因是您在<button> 元素上使用了它。从技术上讲，它们不是“输入”，因此您可以在其上使用 type。

如果您尝试使用 <input> 元素，它应该可以正常工作。像这样的东西应该可以工作：

<input aria-label="unf-search-btn" type="submit" class="search-button search-keyword" value="Search"/>

然后假设您设置了<form> 元素，它应该可以正常工作。

Answer 3

您的代码在我的手机中完全符合您的要求，请尝试将return false; 放在输入提交中

$('.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

您可能还需要添加e.preventDefault()。编辑：然后$("#fform").submit()。