需求:
登录界面input,鼠标focus隐藏提示文字,blur显示提示文字,ipnut输入文字后不显示提示文字。
问题:ie6 无法更改input的type值。
解决方案:
html:
<div class="login-ipt-text1">请输入用户名</div>
<div class="login-ipt-text2">请输入密码</div>
<input type="text" value="" class="login-ipt1">
<input type="password" value="" class="login-ipt2">
css:
.login-ipt-text1 { position: absolute; top: 173px; left: 37px; width: 167px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
.login-ipt-text2 { position: absolute; top: 173px; left: 261px; width: 152px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
.login-ipt1 { position: absolute; top: 173px; left: 37px; width: 167px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
.login-ipt2 { position: absolute; top: 173px; left: 261px; width: 152px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
.non { display:none; }
js:
(function () {
var txt1 = $('.login-ipt-text1'),
txt2 = $('.login-ipt-text2');
$('.login-ipt1, .login-ipt2').focus(function () {
var obj = $(this);
if (obj.hasClass('login-ipt1')) {
txt1.addClass('non');
} else {
txt2.addClass('non');
}
}).blur(function () {
var obj = $(this);
if (obj.val() === '') {
if (obj.hasClass('login-ipt1')) {
txt1.removeClass('non');
} else {
txt2.removeClass('non');
}
}
});
}());
登录界面input,鼠标focus隐藏提示文字,blur显示提示文字,ipnut输入文字后不显示提示文字。
问题:ie6 无法更改input的type值。
解决方案:
html:
<div class="login-ipt-text1">请输入用户名</div>
<div class="login-ipt-text2">请输入密码</div>
<input type="text" value="" class="login-ipt1">
<input type="password" value="" class="login-ipt2">
css:
.login-ipt-text1 { position: absolute; top: 173px; left: 37px; width: 167px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
.login-ipt-text2 { position: absolute; top: 173px; left: 261px; width: 152px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
.login-ipt1 { position: absolute; top: 173px; left: 37px; width: 167px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
.login-ipt2 { position: absolute; top: 173px; left: 261px; width: 152px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
.non { display:none; }
js:
(function () {
var txt1 = $('.login-ipt-text1'),
txt2 = $('.login-ipt-text2');
$('.login-ipt1, .login-ipt2').focus(function () {
var obj = $(this);
if (obj.hasClass('login-ipt1')) {
txt1.addClass('non');
} else {
txt2.addClass('non');
}
}).blur(function () {
var obj = $(this);
if (obj.val() === '') {
if (obj.hasClass('login-ipt1')) {
txt1.removeClass('non');
} else {
txt2.removeClass('non');
}
}
});
}());