IE8 / Firefox的行为差异 [英] IE8/Firefox Behavioral Difference

查看:334
本文介绍了IE8 / Firefox的行为差异的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在写作为JSP的登录页面。这是非常简单的,但在IE8和Firefox的行为有所不同(那里有很大的惊喜)。我还没有测试过这是其他的浏览器。



我可能用一些JavaScript修复了一些问题,但是我只是在实现之前寻找更多关于这个行为的信息一个解决方法,希望有一个更清晰的修复,并避免在将来这个问题。

服务器端生成的HTML代码段是这样的:

 < form name =member_session_infomethod =postautocomplete =offaction =/ membersessiononsubmit =return validate_form() > 
< input type =hiddenid =memberSessionActionname =memberSessionActionvalue =/>
< input type =hiddenname =homePagevalue =/ 2009 / aas / aas_home.jsp/>
< input type =hiddenname =memberLandingPagevalue =/ 2009 / aas / aas_member_landing.jsp/>
< input type =hiddenname =memberProfilePagevalue =/ 2009 / aas / aas_member_profile.jsp/>
< input type =hiddenname =passwordRecoveryPagevalue =/ 2009 / aas / aas_password_recovery.jsp/>

< input id =unameclass =text xsmall rightname =usernamevalue =USERNAMEonclick =checkClickUser()onKeyPress =checkKeyPress(event,'login' ,sendProfile)style =width:220px;类型= 文本 > $ key =checkClickPassword()onKeyPress =checkKeyPress(event,'login')这是一个非常简单的方法, ,sendProfile)style =width:220px;类型= 密码 >

< a href =javascript:sendProfile('startPasswordRecovery'); class =xsmall> FORGOT PASSWORD< / a>
< / form>

以及支持的Javascript是:

 < script type =text / javascriptlanguage =JavaScript> 

函数validatePost(code,doAlert)
{
postValid = true;
返回postValid;
}

函数sendProfile(action)
{
document.getElementById(memberSessionAction)。value = action;
document.member_session_info.submit();
返回false;


函数initializePage()
{
}

函数validate_form()
{
return false ;


函数checkClickUser()
{
var username;

username = document.getElementById(uname)。value;

if(username ==USERNAME){
//清除该字段,因为它是第一次
document.getElementById(uname)。value =;
}

return true;


函数checkClickPassword()
{
var username;

username = document.getElementById(pass).value;

if(username ==PASSWORD){
//清除该字段,因为这是第一次
document.getElementById(pass)。value =;
}

return true;


函数checkKeyPress(event,object,func)
{
var keycode;
if(window.event)keycode = window.event.keyCode;
else if(event)keycode =(event.which)? event.which:event.keyCode;
else返回true; $(b)b
if((keycode == 13))//检查返回
{
func(object);
返回true;
}
返回true;
}

< / script>

基本症状是:
如果您使用tab从用户名字段导航到表单中的密码字段,密码在FF中正确突出显示并清除,但不在IE8中。在IE8中,跳转到密码字段将光标移动到密码框的最开始处,保留默认值(PASSWORD),而不清除它。



任何想法为什么发生这种情况?这是IE8的一个已知的错误或固有的缺陷,我只需要破解,或者我可以在一些地方添加一些代码来更正确地处理IE8?



如果从我的描述中不清楚的问题,我可以试图澄清或只是吐出一个截图/视频剪辑,或上传一个HTML的静态副本。 (如果最后一个,我可以使用一个好的网站或服务的建议做到这一点,因为实际的网站仍然在开发中,并没有提供给网络。)谢谢!



编辑:将onclick属性更改为onfocus解决了这个问题,但又带来了另外一个亮起来(参见我的评论@David)。这可能与checkKeyPress被写入的方式有关吗?这是我从该网站其他地方借用的功能。特别是我想知道如果改变它的回报声明可能是修复。也许它不应该返回true / false /任何东西?

编辑2:我完全删除了checkKeyPress方法,看看是否导致问题,并没有改变。



完整的来源是这里。随机聚焦的div是两个全球导航评论之间的一个,位于主体的最顶端。仍然不知道为什么发生。为了看看焦点是否刚刚得到重置,我在焦点随机跳转到另一个div上面添加了另一个div,期望焦点开始跳到新的div。它没有。它仍然将焦点切换到其中的图像的div。因为丢失的重点似乎每6000毫秒发生一次,我会指责在某处expandone ()/ contractall()in /js/qm_scripts.js。



您的登录表单位于dropmsg0div中,导致它暂时隐藏并每6秒重新显示一次秒。隐藏时,文本框在IE8中失去焦点。我要么重命名的股利排除如果从股票,或修改股票脚本不能运行时,只有一个dropmsg div。


I'm working on login page written as a JSP. It's pretty simple but behaves differently in IE8 and Firefox (big surprise there). I have not tested this is other browsers yet.

I could probably hack a fix in with some Javascript but I was looking for more information about the behavior, before I just implement a workaround, with hopes of a cleaner fix and avoiding this problem in the future.

The server-side generated HTML snippet in question is this:

<form name="member_session_info" method="post" autocomplete="off" action="/membersession" onsubmit="return validate_form()" >
      <input type="hidden" id="memberSessionAction" name="memberSessionAction" value="" /> 
      <input type="hidden" name="homePage" value="/2009/aas/aas_home.jsp" />
      <input type="hidden" name="memberLandingPage" value="/2009/aas/aas_member_landing.jsp" />
      <input type="hidden" name="memberProfilePage" value="/2009/aas/aas_member_profile.jsp" />
      <input type="hidden" name="passwordRecoveryPage" value="/2009/aas/aas_password_recovery.jsp" /> 

      <input id="uname" class="text xsmall right" name="username" value="USERNAME" onclick="checkClickUser()" onKeyPress="checkKeyPress(event, 'login', sendProfile)" style="width: 220px;" type="text">

      <input id="pass" class="text xsmall right" name="password" value="PASSWORD" onclick="checkClickPassword()" onKeyPress="checkKeyPress(event, 'login', sendProfile)" style="width: 220px;" type="password">

      <a href="javascript:sendProfile('startPasswordRecovery');" class="xsmall">FORGOT PASSWORD</a>
</form>

and the Javascript that backs it up is:

<script type="text/javascript" language="JavaScript">

function validatePost(code, doAlert)
{
    postValid = true;
    return postValid;
}

function sendProfile(action)
{
    document.getElementById("memberSessionAction").value = action;
    document.member_session_info.submit();
    return false;
}

function initializePage()
{
}

function validate_form()
{
    return false;
}

function checkClickUser()
{
    var username;

    username = document.getElementById("uname").value;

    if (username == "USERNAME") {
        // Clear the field since it's the first time
        document.getElementById("uname").value = "";
    }

    return true;
}

function checkClickPassword()
{
    var username;

    username = document.getElementById("pass").value;

    if (username == "PASSWORD") {
        // Clear the field since it's the first time
        document.getElementById("pass").value = "";
    }

    return true;
}

function checkKeyPress(event, object, func)
{
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (event) keycode = (event.which) ? event.which : event.keyCode;
    else return true;

    if ((keycode == 13)) // check for return
    {
        func(object);
        return true;
    }
    return true;    
}

</script>

The basic symptom is this: If you use tab to navigate from the username field to the password field in the form, the password is correctly highlighted and cleared in FF, but not in IE8. In IE8, tabbing to the password field moves the cursor to the very beginning of the password box, leaving the default value (PASSWORD) in place, and not clearing it.

Any idea on why this occurs? Is this a known bug or inherent flaw of IE8 that I will just have to hack around, or can I just add a wee bit of code somewhere to handle IE8 more correctly?

If the problem isn't clear from my description I can attempt to elucidate or just throw up a screenshot/video clip, or upload a static copy of the HTML somewhere. (If the last one, I could use a recommendation of a good site or service to do this since the actual site is still in dev and not availabile to the web yet.) Thanks!

Edit: Changing the onclick property to onfocus fixed that problem, but brought another one to light (see my comment @David). Could this be related to the way that checkKeyPress is written? It's a function I borrowed from elsewhere in the site. In particular I'm wondering if changing its return statements could be the fix. Maybe it shouldn't return true/false/anything at all?

Edit 2: I removed the checkKeyPress method entirely to see if that was causing the problem, and it changed nothing.

The full source is here. The div that focus randomly jumps to is the one between the two "global nav" comments, at the very top of the body. Still no idea why it's happening. To see if the focus was somehow just getting reset, I added another div above the one that focus is jumping to randomly, expecting focus to start jumping to the new div instead. It didn't. It still switches focus to the div with the image in it. I am utterly befuggled.

解决方案

Since the lost focus seems to happen every 6000 milliseconds, I'd point the blame somewhere at expandone()/contractall() in /js/qm_scripts.js.

Your login form is in the "dropmsg0" div, causing it to be briefly hidden and redisplayed every 6 seconds. The textboxes lose focus in IE8 when hidden. I'd either rename the div to exclude if from the ticker, or modify the ticker script to not run when there's only one dropmsg div.

这篇关于IE8 / Firefox的行为差异的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆