Html HTML5中的输入类型=“文本”与输入类型=“搜索”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11589770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
input type="text" vs input type="search" in HTML5
提问by Vijin Paulraj
I'm new to HTML5 as begun to work with HTML5's new form input fields. When I'm working with form input fields, especially <input type="text" />and <input type="search" />IMO there wasn't any difference in all major browser including Safari, Chrome, Firefox and Opera. And the search field also behaves like a regular text field.
我是 HTML5 的新手，因为开始使用 HTML5 的新表单输入字段。当我使用表单输入字段时，尤其是<input type="text" />和<input type="search" />IMO 时，所有主要浏览器（包括 Safari、Chrome、Firefox 和 Opera）都没有任何区别。并且搜索字段的行为也类似于常规文本字段。
So, what is the difference between input type="text"and input type="search"in HTML5?
那么，HTML5 中的input type="text"和 有什么区别input type="search"呢？
What is the real purpose of <input type="search" />?
的真正目的是<input type="search" />什么？
回答by Norguard
Right now, there isn't a huge deal between them - maybe there never will be. However, the point is to give the browser-makers the ability to do something special with it, if they want.
现在，他们之间没有什么大不了的——也许永远不会有。然而，关键是让浏览器制造商能够在他们想要的时候用它做一些特别的事情。
Think about <input type="number">on cellphones, bringing up number pads, or type="email"bringing up a special version of the keyboard, with @ and .com and the rest available.
想想<input type="number">在手机上，调出数字键盘，或调type="email"出特殊版本的键盘，@ 和 .com 以及其他可用的。
On a cellphone, search could bring up an internal search applet, if they wanted.
如果需要，在手机上，搜索可以调出一个内部搜索小程序。
On the other side, it helps current devs with css.
另一方面，它可以帮助当前的开发人员使用 css。
input[type=search]:after { content : url("magnifying-glass.gif"); }
回答by Jashwant
It does absolutely nothing in most browsers. It just behaves like a text input. This isn't a problem. The spec doesn't require it to do anything special. WebKit browsers do treat it a bit differently though, primarily with styling.
A search input in WebKit by default has an inset border, rounded corners, and strict typographic control.
它在大多数浏览器中完全没有作用。它的行为就像一个文本输入。这不是问题。规范不要求它做任何特别的事情。不过，WebKit 浏览器对它的处理方式有所不同，主要是在样式方面。
默认情况下，WebKit 中的搜索输入具有内嵌边框、圆角和严格的排版控制。
Also,
还，
This isn't documented anywhere that I know of nor is it in the spec, but you if you add a results parameter on the input, WebKit will apply a little magnifying glass with a dropdown arrow showing previous results.
这在我所知道的任何地方都没有记录，也没有在规范中记录，但是如果您在输入上添加结果参数，WebKit 将应用一个带有下拉箭头的小放大镜显示以前的结果。
<input type=search results=5 name=s>
Above all, it provides a semantic meaning to the input type.
最重要的是，它为input type.
Update:
更新：
回答by Harsh Raj
Visually/functionally, 2 differences if the input type is 'search':-
在视觉/功能上，如果输入类型是“搜索” ，则有 2 个差异：-
- You get a 'X' symbol at the end of the input/search box to clear texts in the box
- Pressing 'Esc' key on keyboard also clears texts
- 你会在输入/搜索框的末尾得到一个“ X”符号来清除框中的文本
- 按键盘上的“ Esc”键也会清除文本
回答by Scott Wilson
回答by sage88
Actually be very careful about assuming it does nothing. When you go to style inputs with the type search they have certain attributes that cannot be changed. Try to change the border on one and you will find it quite impossible. There are several other disallowed CSS attributes, check out thisfor all the details.
实际上要非常小心地假设它什么都不做。当您使用类型搜索进入样式输入时，它们具有某些无法更改的属性。尝试改变一个边界，你会发现这是不可能的。还有其他几个不允许的 CSS 属性，请查看此以了解所有详细信息。
Also as mentioned by Jashwant there's the result attribute, though it doesn't work very well unless you also include the autosave attribute. The drop down will not work in most browsers, however, so use at your own peril.
同样正如 Jashwant 所提到的，还有 result 属性，尽管它不能很好地工作，除非您还包含 autosave 属性。但是，下拉菜单在大多数浏览器中不起作用，因此请自行承担风险。
回答by qingyang yu
using input type="search" make the keybord enterkey's text show "search", which may improve user experience. however, you have to adjust the style if using this type.
使用 input type="search" 使键盘 enterkey 的文本显示为“search”，可以提高用户体验。但是，如果使用这种类型，则必须调整样式。
回答by yidea
There's browser difference in action, when you type some words then keyed ESC in input type="search"in chrome/safari the input box will get cleared. but in type="text"scenario, the words will not get cleared. So be careful choosing the type especially when u use it for autocomplete or search related feature
浏览器的操作有所不同，当您type="search"在 chrome/safari中输入一些单词然后在输入中键入 ESC 时，输入框将被清除。但在type="text"场景中，这些话不会被清除。所以要小心选择类型，尤其是当你将它用于自动完成或搜索相关功能时
回答by James Groves
Bonus point: input type="search" has the ability to use the onsearchattribute (although I have noticed this does NOT work in Microsofts new Edge Browser), which eliminates the need to write a custom onkeypress=if(key=13) { function() }thing.
加分点：input type="search“具有使用onsearch属性的能力（虽然我注意到这在 Microsoft 的新 Edge 浏览器中不起作用），这消除了编写自定义内容的需要onkeypress=if(key=13) { function() }。
回答by Fil
It depends on the programmers point of view, a programmer can easily determine the purpose of the input by looking on the type and it's easy for CSS styling and for JavaScript or JQuery to verify rule in the inputs.
这取决于程序员的观点，程序员可以通过查看类型轻松确定输入的目的，并且 CSS 样式和 JavaScript 或 JQuery 很容易验证输入中的规则。
回答by STEEL
But it has a bad affect on yout input element, if you set
但它对你的输入元素有不好的影响，如果你设置
<input type="search">
And in your css you set
在你的 css 中你设置
input {background: url("images/search_bg.gif");}
It wont showup at all.
它根本不会出现。
