My loyal BizTalk readers :) may be surprised to know I'm pretty handy with writing code as well. As such I've been working on a ASP.Net site recently and had to deal with this weird situation.

If you have a webpage with two buttons 'Ok' and 'Cancel' say, and you set default button like this:

Page.Form.DefaultButton = btnOk.UniqueID;

Now lets say you're doing the right thing in regards to accessibility and paying attention to how your page behaves without the mouse and you tab to the Cancel button and hit the enter key, what do you expect to happen?

You would expect the Cancel button event to fire right? Well actually it doesn't. Even though the Cancel button has the focus, it is the DefaultButton event that fires and therefore it is the Ok button that executes. The exact wrong thing you would want to happen.

DefaultButton is implemented using a javascript method called "WebForm_FireDefaultButton". To fix the issue I've just described the solution was to add a javascript file to the page (in my case it was the Master page) that overloads that method. In a nutshell this overloaded method checks to see if the the focus is on a button and if it was the enter key which was pressed. If those two things are true, the FireDefaultButton is ignored. This is the script that we used:

 

// In the case where a defaultbutton is programmatically set button A the user tabs the focus to button B and hits the enter key, button A will fire. This is the workaround.

 

if (typeof(WebForm_FireDefaultButton) != 'undefined' )

      var origFireDefaultButton = WebForm_FireDefaultButton;

 

WebForm_FireDefaultButton = function(event, target) {

    if (event.keyCode == 13) {

        var src = event.srcElement || event.target;

       

        // Don't call original function if focus is on a button

        if (src &&

            (src.tagName.toLowerCase() == "input") &&

            (src.type.toLowerCase() == "submit" || src.type.toLowerCase() == "button")) {

            return true;

        }

    }

   

    return origFireDefaultButton(event, target);

}

As you can see, fortunately, the script is very lightweight and won't therefore cause much of a performance drag.

posted on Wednesday, July 2, 2008 3:16 PM | Print

Comments

Gravatar
# re: ASP.Net DefaultButton fires wrong button when tab is used to focus a button
Posted by Chris H on 5/14/2009 8:00 PM
Excellent. Thank you! Couldn't find mention of this problem anywhere else on the net but this code solves the problem nicely.

Just a quick note to anyone trying to use this: be sure to add the script right at the bottom of the page - the event this overrides doesn't get created till right at the end of the page within the WebResource.axd script.

Funny that Microsoft haven't picked up on this - I see this as being quite a big bug.
Gravatar
# re: ASP.Net DefaultButton fires wrong button when tab is used to focus a button
Posted by Mark on 5/14/2009 8:13 PM
re Chris H,
I actually followed this up with the ASP.Net team at Microsoft and they said, by design, won't fix.
Gravatar
# re: ASP.Net DefaultButton fires wrong button when tab is used to focus a button
Posted by Joe Rattz on 5/21/2009 3:38 AM
Thanks! Worked for me. I just created a DefaultButtonFix.js file and stuck it in there.
Gravatar
# re: ASP.Net DefaultButton fires wrong button when tab is used to focus a button
Posted by Hemendra on 6/23/2009 6:48 PM
Great artcle:It helped me a lot.
Gravatar
# re: ASP.Net DefaultButton fires wrong button when tab is used to focus a button
Posted by meilleur casino on 4/13/2010 9:03 PM
I have made my cmdRun button a default button. My question is how can I get my textbox to capitalize once I press enter to run the program. I have a lost_focus routine and in my cmdRun sub I have the txtCubeCupName ucasing and trimming plus I have it so it setfocus. Does anyone have suggestions?....
Gravatar
# re: ASP.Net DefaultButton fires wrong button when tab is used to focus a button
Posted by Srilakshmi on 5/4/2010 4:25 PM
if it is link button we need if(src.tagName.toLowerCase()=="a")//for link button
return true; or make use of window.event.srcElement.id
Gravatar
# re: ASP.Net DefaultButton fires wrong button when tab is used to focus a button
Posted by Srilakshmi on 5/4/2010 4:25 PM
if it is link button we need if(src.tagName.toLowerCase()=="a")//for link button
return true; or make use of window.event.srcElement.id
Post Comment
Title *  
Name *  
Email
Url
Comment *  
Please add 7 and 6 and type the answer here: