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();}});}