gib65
03-21-2015, 02:54 AM
Hello,
I'm trying to wire up the enter key to a button click and it's not working.
The button is a login button. We'd like for the user to have the option of clicking the button or clicking enter to log in. What I'm finding is something weird: it works if the username textbox has the focus but it fails if it doesn't.
Here's the HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AHSLearning.Login" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AHS Learning</title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css?reload"/>
<script type="text/javascript" src="Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="Scripts/Login.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="BodyDiv">
<table class="LogoTable" border="0">
<tr>
<td class="AHSLogoCell">
<img src="images/AHS.png" alt="AHS Logo" border="0" />
</td>
<td class="EMSLogoCell">
<img src="images/EMS.png" alt="EMS Logo" border="0" />
</td>
</tr>
</table>
<div id="MainContentDiv" class="MainContent">
<div class="AHSLearningSystem">
<span>AHS Learning System</span>
</div>
<table class="LoginTable" border="0">
<tr>
<td class="LoginCaptionColumn">Login:</td>
<td class="LoginTextboxColumn"><asp:TextBox width="150px" ID="UsernameTextbox" ClientIDMode="Static"
runat="server" autofocus></asp:TextBox></td>
</tr>
<tr>
<td class="LoginCaptionColumn">Password:</td>
<td class="LoginTextboxColumn"><asp:TextBox width="150px" ID="PasswordTextbox" ClientIDMode="Static"
runat="server" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><asp:Label ID="LoginFailedLabel" class="LoginFailedLabel"
runat="server">Login Failed</asp:Label></td>
</tr>
</table>
<div class="ButtonDiv">
<asp:Button ID="LoginButton" Text="Login" runat="server" OnClick="LoginButton_Click"
onclientclick="LoginButton_ClientClick(); return false;"/>
<br />
<br />
<input id="ChangePasswordButton" type="button" value="Change Password" />
</div>
</div>
<table border="0" style="width: 100%; margin-top: 200px;">
<tr>
<td style="width: 385px;"> </td>
<td style="border-top: 1px solid black;"><span class="Version">Version: 0.7</span></td>
<td style="width: 510px;"> </td>
</tr>
</table>
<asp:HiddenField ID="IsLoggedInHiddenField" Value="false" runat="server" />
<asp:HiddenField ID="IsLoginAttemptedHiddenField" Value="false" runat="server" />
<asp:HiddenField ID="IsFirstTimeLoggingInHiddenField" Value="true" runat="server" />
</div>
</form>
</body>
</html>
And here's the javascript:
$(function ()
{
...
document.onkeydown = function (event)
{
if (event.keyCode == 13)
{
$("#LoginButton").trigger();
}
}
});
When the username textbox has the focus and the user hits enter, $("#LoginButton").trigger() results in the C# button handler logging the user in (assuming they got their credentials correct). But if the username textbox doesn't have the focus, then I get this error from the minimized JQuery script:
0x800a138f - JavaScript runtime error: Object.prototype.hasOwnProperty: 'this' is null or undefined
The line in the minimized JQuery is this:
p=j.call(b,"type")?b.type:b
I've attached the JQuery file itself in case anyone's up for parsing it (It's jquery-1.11.1.min.js).
Can anyone tell me why the call to trigger() doesn't work when the textbox doesn't have focus?
I'm trying to wire up the enter key to a button click and it's not working.
The button is a login button. We'd like for the user to have the option of clicking the button or clicking enter to log in. What I'm finding is something weird: it works if the username textbox has the focus but it fails if it doesn't.
Here's the HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AHSLearning.Login" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AHS Learning</title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css?reload"/>
<script type="text/javascript" src="Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="Scripts/Login.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="BodyDiv">
<table class="LogoTable" border="0">
<tr>
<td class="AHSLogoCell">
<img src="images/AHS.png" alt="AHS Logo" border="0" />
</td>
<td class="EMSLogoCell">
<img src="images/EMS.png" alt="EMS Logo" border="0" />
</td>
</tr>
</table>
<div id="MainContentDiv" class="MainContent">
<div class="AHSLearningSystem">
<span>AHS Learning System</span>
</div>
<table class="LoginTable" border="0">
<tr>
<td class="LoginCaptionColumn">Login:</td>
<td class="LoginTextboxColumn"><asp:TextBox width="150px" ID="UsernameTextbox" ClientIDMode="Static"
runat="server" autofocus></asp:TextBox></td>
</tr>
<tr>
<td class="LoginCaptionColumn">Password:</td>
<td class="LoginTextboxColumn"><asp:TextBox width="150px" ID="PasswordTextbox" ClientIDMode="Static"
runat="server" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><asp:Label ID="LoginFailedLabel" class="LoginFailedLabel"
runat="server">Login Failed</asp:Label></td>
</tr>
</table>
<div class="ButtonDiv">
<asp:Button ID="LoginButton" Text="Login" runat="server" OnClick="LoginButton_Click"
onclientclick="LoginButton_ClientClick(); return false;"/>
<br />
<br />
<input id="ChangePasswordButton" type="button" value="Change Password" />
</div>
</div>
<table border="0" style="width: 100%; margin-top: 200px;">
<tr>
<td style="width: 385px;"> </td>
<td style="border-top: 1px solid black;"><span class="Version">Version: 0.7</span></td>
<td style="width: 510px;"> </td>
</tr>
</table>
<asp:HiddenField ID="IsLoggedInHiddenField" Value="false" runat="server" />
<asp:HiddenField ID="IsLoginAttemptedHiddenField" Value="false" runat="server" />
<asp:HiddenField ID="IsFirstTimeLoggingInHiddenField" Value="true" runat="server" />
</div>
</form>
</body>
</html>
And here's the javascript:
$(function ()
{
...
document.onkeydown = function (event)
{
if (event.keyCode == 13)
{
$("#LoginButton").trigger();
}
}
});
When the username textbox has the focus and the user hits enter, $("#LoginButton").trigger() results in the C# button handler logging the user in (assuming they got their credentials correct). But if the username textbox doesn't have the focus, then I get this error from the minimized JQuery script:
0x800a138f - JavaScript runtime error: Object.prototype.hasOwnProperty: 'this' is null or undefined
The line in the minimized JQuery is this:
p=j.call(b,"type")?b.type:b
I've attached the JQuery file itself in case anyone's up for parsing it (It's jquery-1.11.1.min.js).
Can anyone tell me why the call to trigger() doesn't work when the textbox doesn't have focus?