简体   繁体   English

JavaScript登录按钮在IE中有效,但在Chrome或Firefox中不起作用

[英]JavaScript login button works in IE but not in Chrome or Firefox

I have a very simple webpage that asks a user for a login and password and to press a login button. 我有一个非常简单的网页,要求用户输入登录名和密码并按登录按钮。 This works perfectly fine in IE but not in Chrome or Firefox, can anyone tell me why or point me in the right direction? 这在IE中可以很好地工作,但在Chrome或Firefox中则不能,有人可以告诉我原因或正确的方向吗?

<?xml version="1.0" encoding="iso-8859-1" ?>
<xsl:stylesheet type="application/xsl" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:template match="/">

<html>

<head>


<title>Test Online Login</title>

<script>

<xsl:if test="VFILE_DATA/LOGGED_IN='TRUE'">

  // Logged in OK so run menu

 document.URL = "http://gla-web01:91/scripts/test.wsc/vfxmlsws.p?" +
                "function=system_blank" +
                "&amp;xsl=Personal.xsl" +
                "&amp;session_key=<xsl:value-of select="VFILE_DATA/SESSION_KEY"/>";

</xsl:if>


function login(){

  // Check to see if login parameters are correct

  document.URL="http://gla-web01:91/scripts/test.wsc/vfxmlsws.p?"+"function=user_login"+"&amp;server_translate=false"+"&amp;xsl_dir=/vfile_test"+"&amp;user_id="+user.value+"&amp;password="+password.value+"&amp;xsl=install_login.xsl";

}

function checkReturnKey(){
    // Test to see if the return key has been pressed
    if ( event.keyCode == 13 )
      login();
  }

</script>
                    <style>
                table {
                    border-collapse: collapse;
                    width: 100%;
                    font-family:calibri
                }

                th, td {
                    text-align: left;
                    padding: 8px;
                    font-family:calibri
                }

                tr:nth-child(even){background-color: #E4E4E4}

                th {
                    background-color: #eedaff;
                    color: black;
                    text-align: left;
                    font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
                    width: 100%;
                }

                label {    
                    color: #666;
                    text-align: left;
                    font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
                    width: 100%;

                }
                </style>
</head>


<body>

<div id="title"><h2>Test User Login</h2>
<hr></hr></div>



  User:<input id="user" type="text" onkeypress="checkReturnKey()"/>

  Password:<input id="password" type="password" onkeypress="checkReturnKey()"/>


  <input class="loginButton" type="button" value="Login" onclick="login()"/>  
    <button onclick="login()">Login2</button>
<xsl:if test="VFILE_DATA/LOGGED_IN='FALSE'">
<P/>
Invalid Login

</xsl:if>


</body>

</html>

</xsl:template>
</xsl:stylesheet>

As you can see I've tried two different methods of coding the login button, both work in IE but neither in Chrome or FireFox. 如您所见,我尝试了两种不同的登录按钮编码方法,两种方法都可以在IE中使用,但不能在Chrome或FireFox中使用。

I've read several similar topics on this: 我已经阅读了几个类似的主题:

Why this button works in IE but not in Firefox? 为什么此按钮在IE中有效但在Firefox中不起作用?

XSLT works in IE, not in Chrome or Firefox XSLT适用于IE,不适用于Chrome或Firefox

Why this button works in IE but not in Firefox? 为什么此按钮在IE中有效但在Firefox中不起作用?

Javascript works in IE but not in Chrome Javascript可在IE中使用,但不能在Chrome中使用

javascript works in IE but not in firefox javascript在IE中起作用,但在Firefox中不起作用

but nothing has helped. 但没有任何帮助。 I'm sure it must be something really simple I'm missing but can't figure it out! 我敢肯定这一定是真的很简单,我想念但无法弄清楚!

Thanks, 谢谢,

(This has to be a duplicate.) (这可能是重复。)

keyCode is Microsoft-specific. keyCode是Microsoft特定的。 It's which on other browsers. 这是which在其他浏览器。 So: 所以:

function checkReturnKey(){
    // Test to see if the return key has been pressed
    if ( (event.keyCode || event.which) == 13 ) {
        login();
    }
}

That works because of JavaScript's curiously-powerful || 由于JavaScript的强大功能|| operator , which doesn't have a boolean result; 运算符 ,它没有布尔结果; instead, its result is the first operand if that operand is truthy , or the second operand if not. 相反,如果该操作数为true ,则结果为第一个操作数,否则为第二个操作数。 So if event.keyCode is a truthy value ( undefined is falsy), we compare 13 with that value; 因此,如果event.keyCode是真实值( undefined是虚假的),我们将13与该值进行比较; if it's falsy ( undefined , for instance), we compare event.which with 13 instead. 如果是假的(例如undefined ),我们将event.which13进行比较。

I believe you also want to be doing this on keydown , not keypress ; 我相信你也想上进行这样keydown ,没有keypress ; eg: 例如:

<input id="user" type="text" onkeydown="checkReturnKey()"/>
<!-- -----------------------------^^^^                  -->

好的,事实很简单,应该使用location.href而不是document.url使其在chrome中工作。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM