输入类型 =“文本”vs输入类型=“搜索”在HTML5

我是 HTML5 的新手,开始使用 HTML5 的新表单输入字段。当我使用表单输入字段,特别是<input type="text" />和<input type="search" />IMO 时,所有主要浏览器都没有任何区别,包括 Safari,Chrome,Firefox 和 Opera。搜索字段也像常规文本字段一样。

我是 HTML5 的新手,开始使用 HTML5 的新表单输入字段。当我使用表单输入字段,特别是<input type="text" /><input type="search" />IMO 时,所有主要浏览器都没有任何区别,包括 Safari,Chrome,Firefox 和 Opera。搜索字段也像常规文本字段一样。

那么,HTML5 中的input type="text"input type="search"有什么区别?

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

207

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

想想手机上的<input type="number">,调出数字键盘,或者type="email"调出一个特殊版本的键盘,还有 @ 和.com,其余的都可以使用。

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

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

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

视觉上 / 功能上,2 个差异,如果输入类型是 '搜索':-

您会在输入 / 搜索框的末尾得到一个“X”符号,以清除框中的文本

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

31

它在大多数浏览器中绝对没有任何作用。它只是表现得像文本输入。这不是问题。规范不需要它做任何特别的事情。WebKit 浏览器确实对它有点不同,虽然,主要是与样式。

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

Also,

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

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

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

Update: Chrome 51 removed support for the results attribute:
7

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

More info

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(825)
将单选类型输入移动到标签右侧(moveradio)
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(4条)