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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
onmouseover和onmouseout的烦恼
一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout。   很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout。   在上图中,对于’A'来说:当鼠标进入’A'(
JavaScript触发函数onmouseover,onmouseout,onfocus,onblur综合实例
<!DOCTYPE html> <html> <head> <script> function myFunction(x) { x.style.backgroundColor="red"; } function disFuction(x){ x.style.backgroundColor="white"; } </script> </head> <body> 请输入英文字符:<input type=
onmousemove与onmouseenter与onmouseout有差别
onmouseenter事件:当鼠标移入元素对象的边界之内时,激活该事件 不支持冒泡,由于这个差异,当鼠标在元素边界内移动时,不会激活onmouseenter(只在鼠标进入元素边界内时激活),但会激活onmouseover(当该元素包含子元素时)。 是否可以取消: 不可以取消 事件类型:MouseEvent 支持的标签:所有 HTML 元素,除了: <base>, <bdo>, <br
【JavaScript】利用onmousemove与onmouseout事件制作兼容IE6纯javascript无插件原生态的下拉菜单dropdown
下拉菜单dropdown在很多前端框架里面都有,直接拿来用就可以的,但是框架内的下拉菜单不好改,也很可能会有兼容性问题。 其实这东西完全可以利用HTML+CSS+Javascript去实现的。 效果如下: 其基本制作思想如下: 首先是HTML与CSS的布局,先布置一个table,这个table里面有两行,一行放下拉按钮,一行放下拉菜单,占据整个宽度的100%,单元格之间的行
JS:1.6事件(Event)(onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse)
JS:1.6,事件(Event)(onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse) ylbtech-Event:事件(Event)对象 事件(Event)HTML 4.0 事件属性onclickonchangeonloadonunloadonselectonmouseonfo
IE6下js的onmouseover和onmouseout事件连续触发闪烁解决方法
解决HTML内部元素的Mouse事件干扰  话说有一个DIV元素,其内部有一个IMG元素和SPAN元素,不用理会这两个内部元素怎么布局,这不是我要讨论的重点。  为了实现一些特殊的效果,我需要利用TD的onmouseover和onmouseout事件,测试时就会发现如下的状况:  当鼠标移入DIV内部时,onmouseover事件被触发;接着再鼠标移动到DIV内部的IMG或者SP
swfupload上传控件demo支持上传,删除图片。兼容ie7+,火狐,谷歌浏览器
swfupload上传图片控件,支持删除。兼容浏览器ie7+,火狐,谷歌。上传界面类似QQ空间发表说说界面。
echarts兼容IE浏览器的问题
1.首先,用echarts2版本(较低就行,3及以上版本不行)2.在页面title标签下添加:&amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;/&amp;gt;经过自己亲测.....附echarts 做折线图在IE不显示的问题,前提是上边两个条件已经完成,然后echarts每个最后一个属性的后边不要带逗号;...
谷歌浏览器跨域问题解决
很多场景用谷歌浏览器执行html页面时(涉及加载本地文件)会遇到加载不出来的问题,如下 Failed to load file:///D:/ardo/mytemp/liuqu/geoJson/6city.json: Cross origin requests are onlysupported for protocol schemes: http, data, chrome, chrome-
解决 FIDDLER 在IE8中不识别 LOCALHOST 的问题
原来,当访问localhost或127.0.0.1时,IE8直接访问本机,不再经过任何代理,所以Fiddler失灵。现在找到一种解决方法就是用http://127.0.0.1.去访问就能被Fiddler抓到。注意在127.0.0.1后面一定要那个句点,非常重要。