iPhone Go/Search 选择数据列表选项后，键盘提交在搜索表单上不起作用

Question

出于某种原因，我在网上找不到任何类似的问题。表格的结构就像这个答案建议的那样 - Getting iPhone GO button to submit form

这是表格-

<form id="searchForm" method="get" action="">
    <input type="search" placeholder="Search.." name="query" id="searchTerm" aria-label="Search" list="searchList" autocomplete="off" spellcheck="true">
    <datalist id="searchList">
        <option>Detroit Lions</option>
        <option>Detroit Pistons</option>
        <option>Detroit Red Wings</option>
        <option>Detroit Tigers</option>
    </datalist>
    <button type="submit" name="search" ></button>
</form>

选择任何选项并使用新值更新输入时，除非在按下提交之前有额外的键，否则iPhone键盘提交不起作用。

我正在用 javascript 更新数据列表，我认为这可能是问题所在，但在对上述值进行硬编码后，问题仍然存在。奇怪的是，有时 iPhone 键盘提交会起作用，但我不知道有什么区别。

我试过将自动完成更改为开启。我试过在选项值之后添加一个额外的 space 。我对 javascript 有一些想法，但希望在我花太多时间在错误的方法上之前得到建议。

iPhone 版本 12.4.1 和 14.4.1 以及 14.7.1

*更新- 我尝试实施 javascript 解决方案但没有成功。 search/go 提交仅在用户从数据列表中选择后按下附加键时才有效。使用 javascript 触发按键不起作用。 Iphone go/search 在其他带有数据列表的站点上工作。不确定接下来要尝试什么。

Answer 1

嘿，下面的解决方案对我有用，可以使 phone 键盘上的搜索按钮起作用：

    <form id="searchForm" method="get" action="">
        <input type="search" placeholder="Search.." name="query" id="searchTerm" aria-label="Search" list="searchList" autocomplete="off" spellcheck="true">
        <datalist id="searchList">
            <option>Detroit Lions</option>
            <option>Detroit Pistons</option>
            <option>Detroit Red Wings</option>
            <option>Detroit Tigers</option>
        </datalist>
        <button type="submit" name="search" id="myBtn" ></button>
    </form>
.
.
.

<script>
var input = document.getElementById("searchTerm");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("myBtn").click();
  }
});
</script>

我在末尾添加了一个 js 脚本来触发按钮点击回车，我在 Iphone 键盘上的搜索按钮与数据列表中的选定选项一起工作。

iPhone Go/Search 选择数据列表选项后，键盘提交在搜索表单上不起作用

iPhone Go/Search keyboard submit not working on search form after selecting Datalist option

html

javascript

iphone

ios

html-datalist