在 HTML5中，input type = “ text”vs input type = “ search”

小开

它在大多数浏览器中什么也不做文本输入。这不是一个问题。规范并不要求它这样做 WebKit 浏览器对待它的方式有所不同不过，主要是造型。

默认情况下，WebKit 中的搜索输入有一个四舍五入的插入边框以及严格的排版控制。

还有,

据我所知，任何地方都没有记录，规范中也没有, 但是如果在输入中添加一个 result 参数，WebKit 将应用一个小放大镜，上面有一个下拉箭头结果。

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

最重要的是，它为 input type提供了语义意义。

更新:

Chrome 51删除了对搜索结果属性的支持:

小开

最佳答案

现在，他们之间没什么大不了的——也许永远也不会有。然而，关键在于如果浏览器制造商愿意的话，他们可以用它做一些特别的事情。

想想手机上的 <input type="number">，打开数字键盘，或者 type="email"打开特殊版本的键盘，使用@和。和其他可用的。

在手机上，如果需要的话，搜索可以提供一个内部搜索小程序。

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

input[type=search]:after { content : url("magnifying-glass.gif"); }

小开

但是如果您设置了

<input type="search">

在你的犯罪现场

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

它根本不会出现。

小开

事实上，要非常小心地假设它没有任何作用。当您使用类型搜索进行样式输入时，它们具有某些不能更改的属性。试着改变其中一个的边界，你会发现这是完全不可能的。还有其他一些不允许的 CSS 属性，请参阅这个了解所有详细信息。

Jashwant 还提到了 result 属性，但是除非您也包含 autosave 属性，否则它不能很好地工作。然而，这个下拉菜单在大多数浏览器中都不起作用，因此使用它会给自己带来危险。

小开

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

小开

有浏览器的行动差异，当您键入一些文字，然后键入 ESC 在输入 type="search"在 chrome/safari 的输入框将得到清除。但在 type="text"场景中，文字不会被清除。因此，选择类型时要小心，特别是当您使用它来自动完成或搜索相关功能

小开

好处是: input type="search”能够使用 onsearch属性(尽管我已经注意到这在微软的新边缘浏览器中不起作用) ，这就消除了编写自定义 onkeypress=if(key=13) { function() }的需要。

小开

在视觉/功能上，如果输入类型为“ 搜索”，则有2个不同之处:-

小开

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

小开

使用输入 type = “ search”使键盘的 enterkey 文本显示“ search”，这样可以提高用户体验。但是，如果使用此类型，则必须调整样式。