y515789
T_初晴
采纳率0%
2016-03-14 08:04 阅读 1.5k

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

20

如下代码,当我点击密码的时候,会走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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

5条回答 默认 最新

  • sinat_34254650 yikawb 2016-03-14 08:34

    浏览器执行不一样。把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';
    }
    
    
    点赞 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 2016-03-14 08:40

    你在focus事件里面处理完毕不就行了,干嘛多个onmouseout。你的代码chrome测试没有问题,可能是版本的问题,这种存冲突的事件最好少用,要不就会出现你这个问题

    点赞 评论 复制链接分享
  • y515789 T_初晴 2016-03-15 00:53
     <!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="密码"的功能

    点赞 评论 复制链接分享
  • y515789 T_初晴 2016-03-15 01:05
     <!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>
    

    这是透明的解决方法,还是不行

    点赞 评论 复制链接分享
  • sinat_34254650 yikawb 2016-03-15 03:32

    我刚在线写了个,你看是要这种效果吗? 用透明度处理的话,肯定要定位在上面了,你只需要操作z-index和透明度即可。
    http://sandbox.runjs.cn/show/ynnwb7h2

    点赞 评论 复制链接分享

相关推荐