148

我是 HTML5 新手,开始使用 HTML5 的新表单输入字段。当我使用表单输入字段时,尤其是<input type="text" /><input type="search" />IMO 中,所有主要浏览器(包括 Safari、Chrome、Firefox 和 Opera)都没有任何区别。并且搜索字段的行为也类似于常规文本字段。

input type="text"那么,HTML5和input type="search"HTML5有什么区别呢?

真正的目的是<input type="search" />什么?

4

10 回答 10

198

现在,他们之间没有什么大不了的——也许永远不会有。然而,关键是让浏览器制造商能够根据需要使用它做一些特别的事情。

想想<input type="number">在手机上,调出数字键盘,或type="email"调出特殊版本的键盘,@ 和 .com 以及其他可用的。

在手机上,如果他们愿意,搜索可以调出一个内部搜索小程序。

另一方面,它可以帮助当前的开发人员使用 css。

input[type=search]:after { content : url("magnifying-glass.gif"); }
于 2012-07-21T05:41:30.397 回答
29

它在大多数浏览器中完全没有任何作用。它的行为就像一个文本输入。这不是问题。该规范不要求它做任何特别的事情。WebKit 浏览器对它的处理确实有点不同,主要是在样式方面。

默认情况下,WebKit 中的搜索输入具有嵌入边框、圆角和严格的排版控制。

还,

这在我所知道的任何地方都没有记录,也没有在规范中记录,但是如果您在输入中添加结果参数,WebKit 将应用一个带有下拉箭头的小放大镜来显示以前的结果。

<input type=search results=5 name=s>

参考

最重要的是,它为input type.

更新:

Chrome 51 移除了对 results 属性的支持:

于 2012-07-21T05:41:04.313 回答
27

在视觉/功能上,如果输入类型是“搜索”,则有 2 个差异:-

  1. 您会在输入/搜索框的末尾获得一个“ X ”符号以清除框中的文本
  2. 按键盘上的“ Esc ”键也会清除文本
于 2016-02-08T07:31:40.747 回答
7

在某些浏览器上,它还支持“结果”和“自动保存”属性,通过放大镜图标提供自动“最近搜索”功能。

更多信息

于 2013-07-17T15:49:14.977 回答
2

实际上要非常小心假设它什么都不做。当您使用类型搜索访问样式输入时,它们具有某些无法更改的属性。尝试更改一个边框,您会发现这是不可能的。还有其他几个不允许的 CSS 属性,请查看以了解所有详细信息。

正如 Jashwant 所提到的,还有 result 属性,尽管它不能很好地工作,除非您还包括 autosave 属性。但是,该下拉菜单在大多数浏览器中不起作用,因此使用风险自负。

于 2013-04-26T00:20:32.487 回答
1

浏览器的操作有所不同,当您键入一些单词然后type="search"在 chrome/safari 中输入 ESC 时,输入框将被清除。但在type="text"场景中,这些话不会被清除。所以要小心选择类型,尤其是当你将它用于自动完成或搜索相关功能时

于 2013-11-20T01:05:02.710 回答
1

使用 input type="search" 使 keybord enterkey 的文本显示“search”,这可能会改善用户体验。但是,如果使用这种类型,则必须调整样式。

于 2016-12-08T02:36:01.500 回答
1

加分点:input type="search" 可以使用onsearch属性(虽然我注意到这在微软的新 Edge 浏览器中不起作用),这消除了编写自定义onkeypress=if(key=13) { function() }东西的需要。

于 2015-08-18T15:29:11.890 回答
-1

但它对你的输入元素有不好的影响,如果你设置

<input type="search">

在你的CSS中你设置

input {background: url("images/search_bg.gif");}

它根本不会出现。

于 2013-03-13T09:07:15.187 回答
-1

这取决于程序员的观点,程序员可以通过查看类型轻松确定输入的目的,并且 CSS 样式和 JavaScript 或 JQuery 很容易验证输入中的规则。

于 2016-03-09T05:17:15.860 回答