2012年3月24日土曜日

Return of false for onkeypress event no longer blocks input

I'm not sure if this is related to the Ajax framework but the problem surfaced after I updated my Ajax Extensions and Ajax Futures and I'm searching for any possible cause.

Throughout the website I use a clientside call to do things such as limit the entry into a textbox for a Zip Code to numbers only. I do it like this: onkeypress="return validNumeric(event);" This has always worked just fine. But no longer. Letters, special characters and such can now be keyed into the textbox. I know the onkeypress event is being fired as I've traced it though and added alert message to see that false is being returned by the function validNumeric. If I change to the event onkeydown then the entry of letters/special characters is blocked again. Just onkeypress is failing.

The affected textboxes are those located in a Web Form within a Master Page - the Web Form is also wrapped by an Update Panel. If I move the textbox into the Master Page the onkeypress event works correctly. I've also created a simple website with a Web Form within a Master Page wrapped by an Update Panel and the onkeypress event works fine in all locations. It is only in my existing site.

I've included the code below for the sampme site to show the format of the production site.

MASTER PAGE:

%@dotnet.itags.org. Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function validNumeric(e)
{
var unicode=e.charCode? e.charCode : e.keyCode
if (unicode >= 48 && unicode <= 57) return true;
if (unicode == 8) return true;
if (unicode == 9) return true;
if (unicode == 13) return true;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="upContent" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

WEBFORM:

<%@dotnet.itags.org. Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Label ID="Label1" runat="server" Text="Enter a Number"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" onkeypress="return validNumeric(event);"></asp:TextBox>
</asp:Content>

After further testing this is not an issue with the Ajax Framework but related to how ASP.NET works. The situation arises when the ASP Textbox is located with an ASP Panel which has the DefaultButton property set. A return of false from the onkeypress event does not block the input in this case. If I remove the DefaultButton property from the Panel then the event works as required. I'll repost in the appropriate place for help with this issue. Below is a simple webpage that shows this issue. With the DefaultButton property set alpha input is not block, but without the DefaultButton property then the alpha input is blocked. Maybe it has something to do with how asp.net is handling the enter key being pressed to click the default button.

%@. Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">

function validNumeric(e)
{
var unicode=e.charCode? e.charCode : e.keyCode
if (unicode >= 48 && unicode <= 57) return true;
if (unicode == 8) return true;
if (unicode == 9) return true;
if (unicode == 13) return true;
return false;
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel1" runat="server" DefaultButton="Button1">
<asp:Label ID="Label1" runat="server" Text="Enter a number:"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"
onkeypress="return validNumeric(event);">
</asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
</div>
</form>
</body>
</html>


I did find out how to solve my problem. By changing the onkeypress event from:

onkeypress="return validNumeric(event);" to

onkeypress="event.returnValue=validNumeric(event);"

I now get the form to limit input in the zipcode textbox to numbers only and also keep the DefaultButton property on the Panel it is contained in.

0 件のコメント:

コメントを投稿