2 y515789 y515789 于 2016.03.14 16:04 提问

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

如下代码,当我点击密码的时候,会走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
sinat_34254650   2016.03.14 16: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';
}

y515789
y515789 透明了 但是他还会占位,这个怎么办? 我想的是定位下 z-index:-1;然后需要显示的时候去了定位?
接近 2 年之前 回复
y515789
y515789 恩 我试一下
接近 2 年之前 回复
showbo
showbo   Ds   Rxr 2016.03.14 16:40

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

y515789
y515789 请看下面的
接近 2 年之前 回复
showbo
showbo 回复T_初晴: this.blur()取消获取焦点,而且你focus了除非点击其他地方失去焦点了那个hover样式才会消失吧,mouseout焦点还在空间不会消失啊。什么浏览器会mouseover就增加hover样式的。最好改为js控制,onfocus时才加样式,onbur移除样式,就不需要mouseout了
接近 2 年之前 回复
y515789
y515789 恩 是火狐有问题,Google是好使的。还有 我也不想onmouseout 但是这个是css里面的 hover效果,也就是说我鼠标点上去获取焦点之后,会有个hover的样式,然后那个样式不管你鼠标移到哪里,都不会变了除非移到本身再移开
接近 2 年之前 回复
y515789
y515789   2016.03.15 08: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
y515789   2016.03.15 09: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
sinat_34254650   2016.03.15 11:32

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

y515789
y515789 只有原声的jquery才能改$(this).focus(function(){},在onfocus方法里面不可以改
接近 2 年之前 回复
y515789
y515789 那个是你自己的网站吗?
接近 2 年之前 回复
y515789
y515789 恩恩 可以的 谢谢。
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!