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

Posted 2023-03-11

【中文标题】选择 Datalist 选项后，iPhone Go/Search 键盘提交在搜索表单上不起作用

【英文标题】：iPhone Go/Search keyboard submit not working on search form after selecting Datalist option

【发布时间】：2021-09-03 00:56:55

【问题描述】：

由于某种原因，我在网上找不到任何类似的问题。表格的结构类似于这个答案建议-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 键盘提交会起作用，但我不知道有什么区别。

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

iPhone 版本 12.4.1 和 14.4.1 和 14.7.1

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

【参考方案1】：

嘿，下面的解决方案让我可以使用手机键盘上的搜索按钮：

    <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 键盘上的搜索按钮与 datalist 上的选定选项一起使用。

【讨论】：

感谢您的回答，我使用了相同的解决方案，但从未有时间更新我的问题。我希望有一个非 js 解决方案，因为没有它它应该可以工作。