登录界面 input，鼠标 focus 隐藏提示文字， blur 显示提示文字， ipnut 输入文字后不显示提示文字。

[zhlzh]

需求：
登录界面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');
}
}
});
}());

[Kilerd]

html5+拒绝IE6，可以满足需求，

[Delbert]

为啥要改变type？
可以用placeholder实现。
我自己是通过JS实现的。
onfocus时如果value与预定义的值相等，则value清空。
onblur时判断value是否为空，为空则用预定义的填充。

[Delbert]

楼主，如果你除了这个用不到jQ，没必要引入的啊。

[zhlzh]

@Delbert , 1. 改变type为text是为了显示提示信息时password input不至于显示*****；2. placeholder 是html5，而很多项目客户还是要求支持IE6的；3. 这段代码是节选，整个代码中许多地方要用jQuery；4. 高版本IE及规范浏览器是可以改type的。

[cxe2v]

有个jquery.placeholder插件，或者你可以自己写个JS代码兼容不支持plachholder的浏览器

[crs0910]

@zhlzh 不要用背景透明，改用z-index让文字在input上面，然后给文字加点击事件触发input的focus。

[zhlzh]

@cxe2v 这个实用，平时插件用得少>_<|||

[zhlzh]

@crs0910 input后面还有图~~~

[Delbert]

@zhlzh 好吧，这个倒是没想过……