2

我遇到了一个奇怪的问题。我想通过单击输入按钮来搜索产品。我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，但是在产品搜索中没有出现警报keycode

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

谁能解释为什么会这样？

4

4 回答 4

2

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

<form>
  <input type='text' placeholder='Search for an item'>
  <button type='submit'>Search</button>
</form>
于 2021-12-20T09:13:20.743 回答
0

您的代码在我的手机中完全符合您的要求，请尝试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;
        });
    });
于 2021-12-24T07:00:38.097 回答
0

首先，

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

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

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

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

于 2021-12-22T01:58:04.187 回答
0

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

于 2021-12-29T23:21:08.697 回答