需求是这样的,用户名、密码的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();
}
});
}