推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
登录界面 input，鼠标 focus 隐藏提示文字， blur 显示提示文字， ipnut 输入文字后不显示提示文字。
zhlzh 2015 年 1 月 27 日 3421 次点击这是一个创建于 4035 天前的主题，其中的信息可能已经有所发展或是发生改变。
需求：
登录界面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');
}
}
});
}());
 | 1 Kilerd 2015 年 1 月 28 日 via Android html5+拒绝IE6，可以满足需求， |
 | 2 Delbert 2015 年 1 月 28 日 为啥要改变type？ 可以用placeholder实现。 我自己是通过JS实现的。 onfocus时如果value与预定义的值相等，则value清空。 onblur时判断value是否为空，为空则用预定义的填充。 |
| 3 Delbert 2015 年 1 月 28 日 楼主，如果你除了这个用不到jQ，没必要引入的啊。 |
 | 4 zhlzh OP @Delbert , 1. 改变type为text是为了显示提示信息时password input不至于显示*****；2. placeholder 是html5，而很多项目客户还是要求支持IE6的；3. 这段代码是节选，整个代码中许多地方要用jQuery；4. 高版本IE及规范浏览器是可以改type的。 |
 | 5 cxe2v 2015 年 1 月 28 日 有个jquery.placeholder插件，或者你可以自己写个JS代码兼容不支持plachholder的浏览器 |
Select Language