event.keyCode not working in Firefox

17,181

Solution 1

event.keycode was not supported by Firefox. Use event.which for firefox.

function checkKey(evt) {
  var keyID = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
  alert(keyID);
}

Solution 2

I was working on a project, when I faced the same issue. I did some RND and find out these 2-things;

  1. e.keyCode works fine with onkeydown() function, no matter the browser is Chrome or Firefox.

Here is good practices for both Chrome & Firefox.

// HTML (Note onkeydown() function here)
<input id="anyId" onkeydown="return myFunction(event)" type="text" />

// JavaScript for it
function myFunction(e) {
    var asciiValue = e.keyCode ;
    alert ("ASCII Value: " + asciiValue );   // ASCII of pressed key
    if(asciiValue >0){
       return true;
    }
    else{
       return false;
    }
}
  1. But if we use onkeypress() function in Firefox, then e.keyCode will not work. For this purpose, adopt var asciiValue= e.keyCode || e.charCode.
// HTML (Note onkeypress() function here)
<input id="anyId" onkeypress="return myFunction(event)" type="text" />

// JavaScript for it
function myFunction(e) {
    var asciiValue = e.keyCode || e.charCode ;   // It'll handle both Chrome & Firefox
    alert ("Ascii Value: " + asciiValue);    // ASCII of pressed key
    if(asciiValue>0){
       return true;
    }
    else{
       return false;
    }
}
Share:
17,181

Related videos on Youtube

Victor
Author by

Victor

Updated on June 04, 2022

Comments

  • Victor
    Victor almost 2 years

    I'm having a problem with a Login page I'm developing on ASP.net C#. The form works on IE, but not Firefox. Here's my sample:

    <%@ Page Language="c#" Inherits="ClubCard.loginClubcard" CodeFile="loginClubcard.aspx.cs" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
    <html>
        <head>
            <title>
                Acceso Clubcard
            </title>
    
            <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.25)" />
            <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.25)" />
            <link rel="stylesheet" type="text/css" href="styles.css">
    
            <style>
                #centered
                {
                    LEFT: 50%;
                    MARGIN-LEFT: -235px;
                    POSITION: absolute;
                    TOP: 150px
                }
    
                .letras
                {
                    FONT-SIZE: 10pt;
                    COLOR: white;
                    FONT-FAMILY: Arial
                }
    
                .cajas
                {
                    FONT-SIZE: 10pt;
                    FONT-FAMILY: Arial
                }
    
                .letrasGris A
                {
                    FONT-SIZE: 12px;
                    COLOR: #8f8f92;
                    FONT-FAMILY: Arial;
                    TEXT-DECORATION: none
                }
    
                .highlightit IMG
                {
                    FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
                    -moz-opacity: 1
                }
    
                .highlightit:hover IMG
                {
                    FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
                    -moz-opacity: 0.5
                }
            </style>
    
            <script language="javascript">            
                function actLogin()
                {
                    __doPostBack('btnLogin', '');
                }
    
                function actFocus()
                {
                    tbxPrincipal = document.getElementById("tbxUsername").focus();
                }
    
                function ValidarEnter(src)
                {
                    if (event.keyCode == "13")
                    {
                        actLogin();
                    }
                }
    
                function AbrirLogin() 
                { 
                    if (window.frameElement != null) 
                    { 
                        window.parent.location.replace(window.location.href); 
                    } 
                } 
            </script>
    
            <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            <meta name="CODE_LANGUAGE" content="C#">
            <meta name="vs_defaultClientScript" content="JavaScript">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
        </head>
    
        <body bgcolor="#ffffff" leftmargin="0" topmargin="0" onload="AbrirLogin();actFocus()">
            <form id="Form1" method="post" runat="server" target="_top">
                <table id="Table_01" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="background: url(images/login/loginBg.gif) repeat-x">
                            &nbsp;
                        </td>
                    </tr>
                </table>
    
                <div id="centered">
                    <div style="left: 50%; margin-left: -100px; position: absolute">
                        <div>
                            <img src="images/login/logoClubCard.gif">
                        </div>
                    </div>
    
                    <div style="margin-left: 100px; width: 200px; position: absolute; top: 240px">
                        <table width="100%" cellpadding="0" cellspacing="2" border="0">
                            <tr>
                                <td align="right" class="letras">
                                    USUARIO:
                                </td>
    
                                <td>
                                    <asp:TextBox runat="server" CssClass="cajas" ID="tbxUsername">
                                    </asp:TextBox>
                                </td>
    
                                <td rowspan="3">
                                    &nbsp;&nbsp;
                                    <a class="highlightit" href="javascript:actLogin()" tabindex="3">
                                        <img border="0" src="images/login/botonLogin.gif">
                                    </a>
                                </td>
                            </tr>
    
                            <tr>
                                <td align="right" class="letras">
                                    CLAVE:
                                </td>
    
                                <td>
                                    <asp:TextBox runat="server" CssClass="cajas" ID="tbxPassword" TextMode="Password" OnKeyPress="ValidarEnter(this)" OnTextChanged="tbxPassword_TextChanged">
                                    </asp:TextBox>
                                </td>
                            </tr>
                        </table>
                    </div>
    
                    <div style="margin-top: 54px">
                        <img src="images/login/cajaAzul.gif">
                    </div>
    
                    <div style="display: inline; float: left;width:50% " align="center">
                        <asp:RequiredFieldValidator ID="rfvUsername" runat="server" 
                            CssClass="tA" ErrorMessage="* Escriba su USUARIO"
                            ControlToValidate="tbxUsername">
                        </asp:RequiredFieldValidator>
    
                        <br>
    
                        <asp:RequiredFieldValidator ID="rfvPassword" runat="server" 
                            CssClass="tA" ErrorMessage="* Escriba su CLAVE"
                            ControlToValidate="tbxPassword">
                        </asp:RequiredFieldValidator>
    
                        <br>
    
                        <table >
                            <tr align="center">
                                <td>
                                    <asp:Label runat="server" ID="lblError" Visible="False">
                                        <font color="red" class="tA">
                                            <b>
                                                El USUARIO y CLAVE no coincidieron, trate de nuevo
                                           </b>
                                        </font>
                                    </asp:Label>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
    
                <div style="display: none">
                    <input type="button" runat="server" id="btnLogin" value="login" onserverclick="btnLogin_ServerClick">
                </div>
            </form>
        </body>
    </html>
    

    I'm noticing that in this part...

    function ValidarEnter(src)
                {
                    if (event.keyCode == "13")
                    {
                        actLogin();
                    }
                }
    

    When I debug it on firefox, it just skips it. I have already tried to add window.event.keyCode... and also switch "13" with just 13... How could I work this around?

  • Victor
    Victor about 11 years
    sorry, it did not work out... it actually stopped working on IE =(
  • Victor
    Victor about 11 years
    still no success... I appreciate the help... worked on IE though
  • Victor
    Victor about 11 years
    I specify this when I call the method.... checkKey(this) is in a textbox... is it correct?
  • Amit
    Amit about 11 years
    No, bind on control keypress