I came across a pretty common problem with ASP.Net when it comes to handling the <enter> key. More often than not, hitting the enter key on a website does different things depending on what text field is in focus. Of the many solutions I looked at, none of them handled the submit behaviour of an LinkButton correctly in both FireFox and IE. In the following example show you a hack that will make it work.
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" defaultbutton="Button1">
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<hr />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:LinkButton ID="LinkButton2"
runat="server" onclick="LinkButton2_Click"><img src="button.png" /></asp:LinkButton>
</div>
</form>
</body>
</html>
In this example you’ll see i only have 4 controls: two textboxes, a button and a link button. Our main concern will be textbox2 and linkbutton2 because a form postback is very easily handled by the button normally. When you run this code, button1 will change the text of the label to say “button 1 was clicked” and similarly linkbutton2 will change the text to “button 2 was clicked”. Our goal is to have the text say “button 2 was clicked” when we hit the enter key in textbox 2.
The main problem is that a link button technically isn’t a button. As a result, setting the defaultbutton property of the form to linkbutton2 won’t work (at least not in FireFox). To get around the problem, we employ JQuery to read some properties off the button, and submit back to our web server as if the link was clicked. To do that, we use the following script:
<script type="text/javascript" language="javascript">
$('#<%= TextBox2.ClientID %>').keypress(
function(event) {
if (event.which == 13) {
var postbackScript = ($('#<%= LinkButton2.ClientID %>').attr('href')
.replace('javascript:', ''));
eval(postbackScript);
return false;
} else {
return true;
}
}
);
</script>
This simple script simply reads off the href of linkbutton2, strips off the beginning “javascript:” text, and runs it as a javascript. Simple and effective.
This can applied to more than just link buttons. A basic function can be written that reads the input of an entire form, and depending on the calling object, react different… I’ll hopefully have that posted up in my next blog entry.
You can download the code here: EnterKeyPostback.zip (43.22 kb)