如下代码，当我点击密码的时候，会走onfocus方法。
IE 用户名输入框获取焦点，并执行了onmouseout()方法，用户名的值会变成1。
而Foxfire和Google则是用户名输入框获取焦点，没有执行onmouseout()，用户名没有变！！！！！！！
这是为什么啊，我想让他变啊。
具体的表现在我的登录页面，是密码框获取焦点的时候type=text的隐藏，然后显示type=password的，结果是隐藏了但是type=text的css的hover样式还在，我就很不明白为什么hover还在，于是有了下面那个例子。
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript">
var a = 1;
function aa(){
document.all.idname.value=a++;
}
function focuspwd(){
document.all.idname.focus();
document.all.idpwd.style.display='none';
}
</script>
<div>
<input type="text" id="idname" value="用户名" />
<input type="text" id="idpwd" onmouseout="aa()" value="密码" onfocus="focuspwd()" />
</div>
</html>
浏览器执行不一样。把display:none;改成透明度为0就可以实现了，你用alert弹一下就知道原理啦。
var a = 1;
function aa(){
document.all.idname.value=a++;
}
function focuspwd(){
document.all.idname.focus();
document.all.idpwd.style.opacity='0';
}
你在focus事件里面处理完毕不就行了，干嘛多个onmouseout。你的代码chrome测试没有问题，可能是版本的问题，这种存冲突的事件最好少用，要不就会出现你这个问题
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style type="text/css">
.input_focus{border:1px solid red;}
.input_password:hover{border:1px solid red;}
.input_user:hover{border:1px solid red;}
</style>
<script type="text/javascript">
/* 获取焦点：去掉文本框的值，并且显示type=password的密码文本框 */
function focusInput(_this) {
_this.className = _this.className + ' input_focus';
if (_this.value == '用户名') {
_this.value = '';
}
if (_this.value == '密码') {
showPwdInput();
}
}
/* 失去焦点：如果为空就显示用户名和type=text的密码文本框 */
function blurInput(_this) {
_this.value = _this.value.replace(/(^\s*)|(\s*$)/g, "");
if (_this.className.indexOf('input_password') > -1) {
if (_this.value == '') {
hidePwdInput();
}
_this.className = 'input_password';
}
if (_this.className.indexOf('input_user') > -1) {
if (_this.value == '') {
_this.value = '用户名';
}
_this.className = 'input_user';
}
}
function showPwdInput(){
$('#idtext').hide();
$('#idpwd').show();
$('#idpwd').focus();
}
function hidePwdInput(){
$('#idtext').show();
$('#idpwd').hide();
}
</script>
</head>
<body>
<div>
<input type="text" id="idname" class="input_user" value="用户名" onblur="blurInput(this)" onfocus="focusInput(this)" />
<input type="text" id="idtext" class="input_password" value="密码" onblur="blurInput(this)" onfocus="focusInput(this)" />
<input type="password" id="idpwd" class="input_password" onblur="blurInput(this)" onfocus="focusInput(this)" style="display:none"/>
</div>
</body>
</html>
点击密码 然后在点别的地方，hover效果不会消失，必须移入移出才会消失。
我就是想实现在输入框显示：密码，然后点击的时候密码字样消失。类似于 placeholder="密码"的功能
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style type="text/css">
.input_focus{border:1px solid red;}
.input_password:hover{border:1px solid red;}
.input_user:hover{border:1px solid red;}
</style>
<script type="text/javascript">
/* 获取焦点：去掉文本框的值，并且显示type=password的密码文本框 */
function focusInput(_this) {
_this.className = _this.className + ' input_focus';
if (_this.value == '用户名') {
_this.value = '';
}
if (_this.value == '密码') {
showPwdInput();
}
}
/* 失去焦点：如果为空就显示用户名和type=text的密码文本框 */
function blurInput(_this) {
_this.value = _this.value.replace(/(^\s*)|(\s*$)/g, "");
if (_this.className.indexOf('input_password') > -1) {
if (_this.value == '') {
hidePwdInput();
}
_this.className = 'input_password';
}
if (_this.className.indexOf('input_user') > -1) {
if (_this.value == '') {
_this.value = '用户名';
}
_this.className = 'input_user';
}
}
function showPwdInput(){
//$('#idtext').hide();
document.all.idtext.style.opacity='0';
document.all.idtext.style.float='left';
$('#idtext').css('z-index','-2');
$('#idtext').css('position','fixed');
$('#idpwd').show();
$('#idpwd').focus();
}
function hidePwdInput(){
$('#idtext').show();
document.all.idtext.style.opacity='100';
document.all.idtext.style.float='none';
$('#idtext').css('position','static');
$('#idpwd').hide();
}
</script>
</head>
<body>
<div>
<input type="text" id="idname" class="input_user" value="用户名" onblur="blurInput(this)" onfocus="focusInput(this)" />
<input type="text" id="idtext" class="input_password" value="密码" onblur="blurInput(this)" onfocus="focusInput(this)" />
<input type="password" id="idpwd" class="input_password" onblur="blurInput(this)" onfocus="focusInput(this)" style="display:none"/>
</div>
</body>
</html>
这是透明的解决方法，还是不行
我刚在线写了个，你看是要这种效果吗? 用透明度处理的话，肯定要定位在上面了，你只需要操作z-index和透明度即可。
http://sandbox.runjs.cn/show/ynnwb7h2