深入浅出INPUT文本框

ゞ浴缸里的玫瑰 2022-07-16 01:21 218阅读 0赞

首先说明下本次测试的浏览器版本：

IETester v0.4.12 IE6-IE8

IE9.08112.16421

Chrome 21.0.1180.83 m

Firefox 16.0.1

Opera 12.02

Safari 5.17(7534.57.2)

**1、INPUT文本框的基本属性**

INPUT基础知识，鉴于篇幅，请移步W3SCHOOL学习。

[http://www.w3school.com.cn/tags/tag\_input.asp][http_www.w3school.com.cn_tags_tag_input.asp]

**2、INPUT文本框在不同浏览器下的表现**

我们将一个INPUT文本框字符宽度设置为30，代码如下：

< input id="demo1" name="demo1" type="text" size="30">

看看它在不同浏览器下面的样子吧：

![02f019556d70930000016b627a45c7.jpg_800w_1l][]

从外观上看，IE各版本浏览器显示长宽是一样的，都为220x21px，但是边框样式上有所不同。

Chrome、Firefox、Safari、Opera的长宽以及边框则各不相同。

其实INPUT在不同浏览器中的区别远不止这些，每个浏览器为了保证网页在没有样式表的情况下能够正常显示，它们都自带了一套默认的CSS样式表，而浏览器默认CSS样式表的差异造成了INPUT文本框在不同浏览器下有不同的表现。

解决方法很简单，使用自定义CSS覆盖默认CSS。

< style>

\#demo2\{

width:200px;

height:25px;

border:1px solid \#999;

< input id="demo2" name="demo2" type="text" size="30">

这样单从外观上看，所有的浏览器表现一致。

**3、去除难看的颜色边框**

下面继续深入，当文本框获得焦点时，部分浏览器会出现一个颜色边框，如图：

![023cd8556d707c0000016b6214aaf5.jpg_800w_1l][]

IE6、Firefox、Opera不会出现颜色边框。

IE7、IE8、IE9在不设置border属性时，鼠标悬停及鼠标点击文本框，文本框均会出现一个蓝色边框，颜色较浅，不注意的话可能发现不了，当设置border属性后，边框不出现。

以Chrome为首的webkit内核浏览器，鼠标点击文本框后会出现一个土黄色边框。

Safari中鼠标点击文本框后会出现一个较粗的蓝色边框。

有时候出现边框是很影响视觉效果和用户体验的，不信的童鞋可以用Safari打开淘宝，点击宝贝搜索栏试试，不知道淘宝的前端有没发现这个问题，特别丑。

解决方法：设置border属性，并设置CSS中的outline属性为none。

< style>

\#demo3\{

outline:none;

border:1px solid \#999;

< input id="demo3" name="demo3" type="text" size="30">

**4、增加语音识别输入**

现在越来越多的网站使用上了语音识别输入功能，这个功能仅在webkit内核浏览器中有效，其调用了谷歌相关的API，经过测试，识别率还是挺高的。

实现方法很简单，只需要再input标签内添加上"x-webkit-speech"。

< input id="demo4" name="demo4" type="text" x-webkit-speech="">

webkit内核浏览器中，文本框内会出现一个小麦克风图标，点击图标就可以使用，非webkit内核浏览器则不会出现图标。

![028daf556d70710000016b62fb1514.jpg_800w_1l][]

除此之外，还可以增强语言识别输入功能：

如设置语言种类：lang 限制语言识别内容为中文：

< input id="demo5" name="demo5" type="text" x-webkit-speech="" lang="zh-CN">

还有诸如onwebkitspeechchange、x-webkit-grammar等属性，感兴趣的童鞋可以查看一下相关文档。

**5、制作一个漂亮的搜索框**

以我博客（ [http://www.1990c.com][http_www.1990c.com]）侧栏的搜索框为例。

刚学CSS的朋友可能不清楚这样的搜索框是如何制作的，可以先把它拆解一下：

![029b67556d70670000016b6284f9e8.jpg_800w_1l][]

怎么样，结构简单吧，下面交给CSS就行了，变通一下，可以做出网上大部分的搜索框。

< style>

\#search\{

width:200px;

height:30px;

background:url(images/bg.gif) no-repeat;

display:block;

\#demo6\{

font-family:Verdana,SimSun;

color:\#8A8A8A;

font-size:12px;

width:150px;

height:15px;

border:0;

float:left;

margin:7px 10px 0;

outline:none;

\#btn\{

width:16px;

height:16px;

background:url(images/btn.gif) no-repeat;

border:0;

float:left;

margin-top:7px;

< input id="demo6" name="demo6" type="text">

< input id="btn" type="submit" value="">

**6、用CSS3制作动感的文本框**

下面用CSS3来制作一个具有滑动动画效果的文本框，因为CSS3尚未形成标准，很多浏览器都仅仅使用浏览器私有属性来支持CSS3，为了代码简洁，这里仅使用webkit内核浏览器的私有属性，也就是说，这个demo仅在webkit内核浏览器下有效，当然，会了这个，支持其它浏览器也不是件难事儿。

先来看看demo： [http://www.1990c.com/wp-content/uploads/2012/10/23.html][http_www.1990c.com_wp-content_uploads_2012_10_23.html]

\#demo7是设置文本框普通状态下的效果，\#demo7:focus是文本框获得焦点状态下的效果，涉及CSS3的代码已经注释，应该比较容易看懂:P

< style>

\#demo7\{

font-family:Verdana,SimSun;

color:\#8A8A8A;

font-size:12px;

width:100px;

height:30px;

outline:none;

background:\#FAFAFA;

border:1px solid \#999;

padding-left:10px;

/\*设置圆角\*/

\-webkit-border-radius:5px;

border-radius:5px;

/\*设置内阴影\*/

\-webkit-box-shadow:inset 1px 1px 10px \#DDD;

box-shadow:inset 1px 1px 10px \#DDD;

/\*设置动画效果\*/

\-webkit-transition-duration:500ms;

\-webkit-transition-timing-function:ease;

\#demo7:focus\{

width:200px;

color:\#666;

border:1px solid \#79B041;

< input id="demo7" name="demo7" type="text" value="1990c">

同样，用JavaScript和JQuery也可以做出很炫的效果。

**7、HTML5中INPUT的新特性**

无可辩驳，HTML5将会领导一场Web革命，来看看HTML5中INPUT有哪些新特性吧。

原本由JavaScript等语言完成的表单验证功能现在用HTML5就能搞定。

INPUT标签新增加的type类型有：email、url、number、range、Date pickers、search

例如type为email，在提交表单时会自动验证文本框内的值是否为邮箱地址。

< input id="demo8" name="demo8" type="email">

除了表单验证功能之外，INPUT输入的内容不再仅仅是文本，还有颜色、日期等等，特别方便。

感兴趣的童鞋同样可以移步W3SCHOOL或查看相关资料：

[http://www.w3school.com.cn/html5/html\_5\_form\_input\_types.asp][http_www.w3school.com.cn_html5_html_5_form_input_types.asp]

博客http://www.1990c.com 欢迎交流:P

[http_www.w3school.com.cn_tags_tag_input.asp]: http://www.w3school.com.cn/tags/tag_input.asp
[02f019556d70930000016b627a45c7.jpg_800w_1l]: /images/20220716/d4ea8f35b0d044fdabf2585c35f583c4.png
[023cd8556d707c0000016b6214aaf5.jpg_800w_1l]: /images/20220716/3d50fdd99c6f43af96fed70aa336b1d4.png
[028daf556d70710000016b62fb1514.jpg_800w_1l]: /images/20220716/b8c348536cfb41b3ba19d1f985a4e540.png
[http_www.1990c.com]: http://www.1990c.com/
[029b67556d70670000016b6284f9e8.jpg_800w_1l]: /images/20220716/cde48754a4ec41518495298e9b7ba248.png
[http_www.1990c.com_wp-content_uploads_2012_10_23.html]: http://www.1990c.com/wp-content/uploads/2012/10/23.html
[http_www.w3school.com.cn_html5_html_5_form_input_types.asp]: http://www.w3school.com.cn/html5/html_5_form_input_types.asp