Menu
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">
</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">
<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?
261
Definition and Usage. Note: The keyCode property is deprecated. Use the key property instead.
keyCode. Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
Keycode 13 is the Enter key.
keyCode: Returns the Unicode value of a non-character key in a keypress event or any key in any other type of keyboard event. event. charCode: Returns the Unicode value of a character key pressed during a keypress event.
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);
}
I was working on a project, when I faced the same issue. I did some RND and find out these 2-things;
e.keyCodeworks fine withonkeydown()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;
}
}
- But if we use
onkeypress()function in Firefox, thene.keyCodewill not work. For this purpose, adoptvar 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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
