jQuery实现密码输入框点击隐藏框内提示字

需求是这样的，用户名、密码的input输入框要求将提示字放入框内，如：请输入用户名。当用户点击输入框进行输入的时候隐藏框内提示字。用户名输入框直接初始化显示提示文字，点击时候触发focus事件，置value值为空即可。密码输入框由于type为password类型，若直接初始化提示字则显示为*。于是想到初始设置input的type为text类型，点击输入框后改变输入框的type为password进行密码输入。结果发现行不通。原来input的type属性为只读属性，ie浏览器不允许手动改变。最后解决方案为在密码输入框上方定义一个input框用户显示提示字，密码输入框style初始化不显示，点击提示框后隐藏提示框，显示密码输入框。

页面代码如下：

<input type="tel" class="section6 input-t" name="cardId" id = 'cardId' value='请输入手机号'/><br/>
<input type="text" class="section6 input-t"  id='pin1Lab' value='请输入旧密码'/>
<input type="password" class="section6 input-t" style="display:none;" name="oldPassword" id='pin1' value=''/><br/>
<input type="text" class="section6 input-t" id='pin2Lab' value='请输入新密码'/>
<input type="password" class="section6 input-t" style="display:none;" name="" id='pin2' value=''/><br/>

jQuery代码如下：

$(document).ready(function(){
	cardIdInput();
	pin1Input();
	pin2Input();
	passwordInput();
	});
//点击输入框隐藏提示字
var cardIdInput = function(){
	$("#cardId").focus(function(){
		var oldValue = $(this).val();
		if(oldValue == this.defaultValue){
			$(this).val("");
		}
	});
	
	$("#cardId").blur(function(){
		var oldValue = $(this).val();
		if(oldValue == ""){
			$(this).val(this.defaultValue);
		}
	});
}
var pin1Input = function(){
	$("#pin1Lab").focus(function(){
		$("#pin1Lab").hide();
		$("#pin1").show().focus();
	});

	$("#pin1").blur(function(){
		var value = $(this).val();
		if(value == ""){
			$("#pin1Lab").show();
			$("#pin1").hide();
		}
	});
}
var pin2Input = function(){
	$("#pin2Lab").focus(function(){
		$("#pin2Lab").hide();
		$("#pin2").show().focus();
	});

	$("#pin2").blur(function(){
		var value = $(this).val();
		if(value == ""){
			$("#pin2Lab").show();
			$("#pin2").hide();
		}
	});
}