在 iPhone/iPad Safari 键盘中显示“搜索”按钮

Question

我注意到在戴尔或谷歌等网站上导航时，使用 iPhone 在他们的搜索文本框中键入时，键盘上会出现一个蓝色按钮“搜索”，而不是出现在任何正常表单上的标准“开始”按钮。

你应该怎么做才能显示搜索按钮？

Answer 1

在 HTML5 标准中，在输入中添加 enterkeyhint 属性是更改虚拟键盘标签的正确方法

<input enterkeyhint="search" />

如果没有提供 enterkeyhint 属性，用户代理可能会使用来自输入模式、类型或模式属性的上下文信息来显示合适的输入键标签（或图标）。

见MDN Docs about enterkeyhint

Answer 2

当使用@Anton Bielousov 建议的解决方案时，这也会改变 Android 设备的样式。为了解决这个问题，我不得不：

• 围绕输入添加表单。
• 添加 type="搜索"
• 添加包含搜索的名称
• 添加样式以对抗不需要的 android 样式

Android 样式：

input[type=search] { -webkit-appearance: none; }
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

<form action="" class="search-bar__form-form">
  <input
    class="search-bar__input"
    name="search-bar"
    type="search"
  />
</form>

Answer 3

拥有 type="search" 通常你只需要让软件搜索键盘出现，但是在 iOS8 中，必须有一个带有 action 属性的包装表单。

所以下面的代码会有一个带有“返回”按钮的软键盘

<form>
    <input type="search" />
</form>

但是这段代码应该有蓝色的“搜索”按钮

<form action=".">
    <input type="search" />
</form>

Answer 4

在 iOS 8 上，您可以通过以下方式之一启用键盘上的蓝色“搜索”按钮：

• 添加输入名称=搜索
• 添加输入类型=搜索
• 在 ID 中使用区分大小写的单词“search”添加 id 输入，用于 例如 the-search 或 thesearchgod

Answer 5

我无法获得搜索按钮

<input type="search" />

但是，我确实让它与

一起出现

<form>
    <input name="search" />
</form>

Answer 6

键盘由操作系统 (iOS) 处理，不能直接更改。所需的输入类型决定了要显示的键盘类型。

如果有问题的网站是 HTML5，那么@David 的回答是有效的。

Answer 7

您可以通过以下方式影响此行为：

<input type="search" />

JS Bin demo

忽略 submit 按钮的文本是“水壶”，我只是想确定它不是影响 iOS 键盘文本的提交按钮...

这当然是向后兼容的，因为不理解type="search" 的浏览器将默认为type="text"，这对于创建forward-planning html5 forms 很有用。