jquery html5 实现placeholder 兼容password ie6

在做登录的时候我们都会用到文本框中显示要输入的默认提示，以前都是用js判断的比较麻烦，还有一个就是password是通过两个input框切换实现的，还好html5提供了一个属性placeholder，在input类型的框上可以起到占位符的效果，但现在还不是所有的浏览器都支持很html5，下面就通过jquery、html5来实现可以兼容多种浏览器的placeholder效果。
大致思路：
	1.判断浏览器是否支持html5的placeholder，支持就直接使用该属性。
	2.不支持就通过jquery来添加blur focus事件
	3.对password框的特使处理

运行前要引入jquery类库，

<style type="text/css">
/* 设置提示文字颜色 */
::-webkit-input-placeholder {
color: #838383;
}
:-moz-placeholder {
color: #838383;
}
.placeholder {
color: #ccc;
}
</style>
登录用户名、密码文字提示，鼠标离开显示文字 html5 and jquery<br/>
<br/>
账号：<input type="text" name="email" placeholder = '用户账号' /><br/>
<br/>
密码：<input type="password" name="password" placeholder = '密码' autocomplete="off" /><br/>
<script type="text/javascript">
//判断浏览器是否支持 placeholder属性
function isPlaceholder(){
	var input = document.createElement('input');
	return 'placeholder' in input;
}

if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
	$(document).ready(function() {
	    if(!isPlaceholder()){
	        $("input").not("input[type='password']").each(//把input绑定事件 排除password框
	            function(){
	                if($(this).val()=="" && $(this).attr("placeholder")!=""){
	                    $(this).val($(this).attr("placeholder"));
	                    $(this).focus(function(){
	                        if($(this).val()==$(this).attr("placeholder")) $(this).val("");
	                    });
	                    $(this).blur(function(){
	                        if($(this).val()=="") $(this).val($(this).attr("placeholder"));
	                    });
	                }
	        });
	        //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
	        var pwdField	= $("input[type=password]");
	        var pwdVal		= pwdField.attr('placeholder');
	        pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" />');
	        var pwdPlaceholder = $('#pwdPlaceholder');
	        pwdPlaceholder.show();
	        pwdField.hide();
	        
	        pwdPlaceholder.focus(function(){
	        	pwdPlaceholder.hide();
	        	pwdField.show();
	        	pwdField.focus();
	        });
	        
	        pwdField.blur(function(){
	        	if(pwdField.val() == '') {
	        		pwdPlaceholder.show();
	        		pwdField.hide();
	        	}
	        });
	        
	    }
	});
	
}
</script>
 

 

评论

2 楼 yjw0628 2014-12-11  

text 和password无需分开处理.然后不要用input来显示..统一使用span就好了.

1 楼 supercrsky 2013-09-09  

不输入直接提交form会有各种问题。