html5 type=text,在HTML5中输入type =“text”vs input type =“search”

10 个答案:

答案 0 :(得分：160)

现在，他们之间并没有太大的交易 - 也许永远不会有。

但是，重点是让浏览器制造商能够根据需要做一些特殊的事情。

在手机上考虑，打开数字键盘，或type="email"调出特殊版本的键盘，使用@和.com，其余部分可用。

在手机上，搜索可以调出一个内部搜索小程序，如果他们想要的话。

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

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

答案 1 :(得分：28)

在大多数浏览器中它绝对没有。它只是表现得像

文字输入。这不是问题。规范并不要求它这样做

什么特别的。 WebKit浏览器确实对它有所不同

但是，主要是造型。

默认情况下，WebKit中的搜索输入具有嵌入边框，四舍五入

角落和严格的排版控制。

此外，

这在我所知道的任何地方都没有记录，也没有在规范中记录，

但是如果在输入上添加结果参数，则会应用WebKit

一个小放大镜，下拉箭头显示前一个

结果

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

更新强>

答案 2 :(得分：16)

视觉/功能上，如果输入类型为“搜索”，则会有2个差异： -

您会在输入/搜索框的末尾显示“X”符号，以清除方框中的文字

按键盘上的“Esc”键也会清除文字

醇>

答案 3 :(得分：6)

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

答案 4 :(得分：2)

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

同样如Jashwant所提到的那样，结果属性虽然不起作用，除非你还包括自动保存属性。但是，下拉列表在大多数浏览器中都不起作用，因此请自担风险。

答案 5 :(得分：1)

加分点：input type="search“能够使用onsearch属性(虽然我注意到这在微软新的Edge浏览器中不起作用)，这样就无需编写自定义{{ 1}}事情。

答案 6 :(得分：1)

使用input type =“search”使keybord enterkey的文本显示“搜索”，这可以改善用户体验。但是，如果使用此类型，则必须调整样式。

答案 7 :(得分：1)

操作中存在浏览器差异，当您键入一些单词然后在chrome / safari中的输入type="search"中键入ESC时，输入框将被清除。但在type="text"场景中，这些词语不会被清除。因此，请谨慎选择类型，尤其是当您将其用于自动完成或搜索相关功能时

答案 8 :(得分：0)

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

答案 9 :(得分：-1)

但是如果你设置了，它会对你的输入元素产生不良影响

在你的CSS中你设置了

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

它根本不会出现。