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

Question

我注意到在戴尔或谷歌这样的网站上导航,用iPhone键入他们的搜索文本框,键盘上出现一个蓝色按钮"搜索",而不是任何普通表格上出现的标准"开始"按钮.

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

Answer 1

具有type ="search"通常只需要制作软件搜索键盘然而在iOS8中必须有一个带有action属性的包装表单.

因此,以下代码将具有带"返回"按钮的软件键盘

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

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

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

这个答案对我有用. (3认同)
设置`type = search`在Chrome iOS中舍入搜索输入字段边角时具有负面的UX副作用.讨厌浏览器开始为我做出UI设计决策. (3认同)
@demisx你可以（并且可能总是应该）重置CSS中的默认浏览器样式：`[type =“text”]，[type =“search”] { -webkit-appearance：none; }` 并且不要将功能与样式混合在一起。 (2认同)
这应该是正确的答案，因为无论出于何种原因，Apple 都不会为您提供搜索掩码，除非您包含表单的操作属性。没有它，类型属性就没有实际意义。 (2认同)
@Stonetip这个答案在几年之后出现,可能作为一个更新的解决方案,当iOS 8增加了要求在屏幕键盘上显示"搜索"标签的`action`属性时.因此,按照今天的标准,绝对是一个更好的答案,但不一定是在2011年初问题提出时. (2认同)
答案对于 iPhone 12 仍然有效。 (2认同)

Answer 2

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

<input type="search" />

忽略submit按钮的文本为'kettle',我只是想确定它不是影响iOS键盘文本的提交按钮...

当然,这是向后兼容的,因为不理解的浏览器type="search"将默认为type="text",这对于创建前向规划html5表单很有用.

Answer 3

我无法获得搜索按钮

<input type="search" />

但是,我确实让它出现了

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

Answer 4

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


<input enterkeyhint="search" />

如果未提供 Enterkeyhint 属性，则用户代理可能会使用来自 inputmode、type 或pattern 属性的上下文信息来显示合适的 Enter 键标签（或图标）。