前几天在浏览公司网页时发现一个带有文本的搜索框，于是我就翻了下源码，看其写法与自己的是不是一样，结果有了新的收获。

在以前，“input”里面的文本是用“value”来接收的。然后再用js来判断“input”获得焦点与失去焦点两种状态时清空内容与还原内容。但是眼前这个搜索框初始状态下并没有用到“value”,而是用了一个“placeholder”。附一截图：

带着疑惑我百度了下，原来这是html5中的属性，顿时感觉公司好高大上，话说航空公司本身就给人一种高大上的感觉哈。这个属性起到的效果是：只有当你输入内容时原文本才会清空，而仅获得焦点时是不清空的。下面就附一实例：

当然了，这个在低版本ie下是不支持的，解决办法还是需要靠js。感觉在ie没有彻底被废除的时代，多数情况下为了兼容各浏览器，js是必不可少的！下面再说几个自己积累的关于“input”的经验吧。
经验一：在没有js的情况下限制输入字符长度
解决方案：添加“maxlength”属性。
例如我想控制输入的字符数小于10个，完整写法：

<input type="search" name="search" maxlength="10" />

值得注意的是：一个汉字表示两个字节。也就是说上面最终效果可以输入10个字节或5个汉字。其实在这里会存在一个小问题，就是当我已经输入了9个字符的时候，第10个字符我输入汉字。这个时候也是可以输入的，不信可以在后面的输入框内测试下。

经验二：在不同浏览器下样式兼容
解决方案：在写重构代码时对其进行修改，因为不同浏览器下原始属性会有值。下面附chrome浏览器下的效果图:

怎么样，这下再知道为什么不同浏览器下不兼容了吧。
经验三：在不同浏览器下按钮兼容
问题重现：不知道亲们在以往写代码用到按钮时会不会发现问题，例如：

<input type="submit" />

上面这一行代码显示的效果是在chrome下显示“提交”两个字；而在ie8内核里显示的却是“提交查询内容”；在ie6下，那叫个坑爹啊！附图：

解决方案：给其设置指定的“value”值。例：

<input type="submit"value="提交" />

经验四：输入框内的文本不垂直居中如下图：

解决方案：给对应的“input”设置对应的行高属性“line-height”。源码如下：

<input type="text" style="height:30px;line-height:30px;width:300px;border:1px solid #f90;" />

由于这里的高度设置的是“30px”，所以行高也需要设置成“30px”。当然了，实际情况下的高度也不一定非要是这个数值，这里只起一个参考作用。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2014-06-19/164.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。