分享input占位符的几种实现方式

在WEB表单中，为了达到更好的用户体验，往往会在input输入框中添加文字或图形占位符。
以往占位符的实现方式都是通过javascript来判断value值的更改，现在html5提供了placeholder属性就可以在标准浏览器中轻松实现。
下面分别介绍本人常用的3种实现方法：

一、完全依靠javascript

就是通过onfocus,onblur的方式，动态改变其value值，但此种方式有几个缺点：
1.对于密码框，文字占位符无法实现（方式二可避免）
2.表单提交时，还需要对默认值进行单独处理，比较繁琐（方式二、三均可避免）
3.如果文本框中填入非占位符值的默认文本，需特殊处理，如搜索页面文本框中会填入当前的搜索关键字，这个值是不能被当做占位符处理的

function inputFocus(obj){
	var b = obj.val();
	obj.focus(function(){
		if ($(this).val() == b) {
			$(this).val('');
		}
	}).blur(function(){
		if($(this).val().replace(/\s/g,"")==''||$(this).val()==b) {
			$(this).val(b);
		}
	})
};

二、使用label标签来模拟

这种方式比较符合标准，label具有了语义，而且避免了前一种方式的大部分缺点，推荐使用。具体的实现一般是通过绝对定位来将label和input进行重叠，然后配合javascript来调整label标签的显示和隐藏。

但是这里有个问题：当浏览器有自动填充表单功能时，input就会和label上的文字重叠，很难看，这种情况很难处理，即使使用onpropertychange/oninput 也达不到最佳的效果。这里介绍一个技巧：就是使用z-index让input处于label标签的上方，这样当浏览器自动填充时，input就会带有黄色的背景，挡住下方label的文字。

二、使用html5的placeholder属性

这个属性很好用，不再依赖js来完成，浏览器原生支持的当然更爽，可惜这个属性只在标准浏览器中支持，ie不支持。placeholder在各浏览器中的表现也不一样，普通的css无法更改其默认样式，这是因为浏览器使用了优先级更高的伪类重置了样式，我们只需要在css中重写改伪类即可。如firefox：input:-moz-placeholder{color:#999}。

 

上述3中方法没有最优的，只有最合适的，根据实际情况来进行取舍。当然可能还有其他更好的实现方式，欢迎讨论。