Thursday, October 07, 2004

Default Button for a TextBox (Data entry screen) in ASP.NET

#) Default Button for a TextBox (Data entry screen) in ASP.NET
Sometimes I get annoyed when hitting the enter key in a TextBox (say login screen) resulting in undesired effects like the wrong Button being "clicked". After so many code tricks, I found the below method that allows you to specify a default Button to submit when the user hits the enter key in a TextBox.

When you press a key on your keyboard, the js OnKeyPress event is fired. This calls a function to which we pass the id of the button associated with the TextBox. The function gets a reference to the button and simuilates a mouse-click on the Button. We perform a browser detection because IE and Netscape have different event models. The function finally returns false so that the keypress event is cancelled (otherwise a second form submit will be raised). I tried this code with newer versions of IE 6.0/Netscape 7 it worked great!.
//client side js
function clickButton(e, buttonid){
var bt = document.getElementById(buttonid);
if (typeof bt == 'object'){
if(navigator.appName.indexOf("Netscape")>(-1)){
if (e.keyCode == 13){
bt.click();
return false;
}
}
if (navigator.appName.indexOf("Microsoft Internet Explorer")>(-1)){
if (event.keyCode == 13){
bt.click();
return false;
}
}
}
}
//code behind
TextBox1.Attributes.Add("onkeypress", "return clickButton(event,'" + Button1.ClientID + "')");

The code behind generates the following code:


This causes web control Button1 to be clicked when the enter key is hit inside TextBox1.
Hope this helps many!


No comments: