问题描述

onfocus onmouseout IE好使，Foxfire、Google不好使

如下代码，当我点击密码的时候，会走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