asp.net - Asp.Net Form DefaultButton Error in Firefox

Question

The .Net generated code for a form with the "DefaultButton" attribute set contains poor javascript that allows the functionality to work in IE but not in other browsers (Firefox specifcially).

Hitting enter key does submit the form with all browsers but Firefox cannot disregard the key press when it happens inside of a <textarea> control. The result is a multiline text area control that cannot be multiline in Firefox as the enter key submits the form instead of creating a new line.

For more information on the bug, read it here.

This could be fixed in Asp.Net 3.0+ but a workaround still has to be created for 2.0.

Any ideas for the lightest workaround (a hack that doesn't look like a hack =D)? The solution in the above link scares me a little as it could easily have unintended side-effects.

Answer 1

I use this function adapted from codesta. [Edit: the very same one, I see, that scares you! Oops. Can't help you then.]

http://blog.codesta.com/codesta_weblog/2007/12/net-gotchas---p.html.

You use it by surrounding your code with a div like so. You could subclass the Form to include this automatically. I don't use it that much, so I didn't.

<div onkeypress="return FireDefaultButton(event, '<%= aspButtonID.ClientID %>')">
    (your form goes here)
</div>

Here's the function.

function FireDefaultButton(event, target) 
{
    // srcElement is for IE
    var element = event.target || event.srcElement;

    if (13 == event.keyCode && !(element && "textarea" == element.tagName.toLowerCase())) 
    {
        var defaultButton;
        defaultButton = document.getElementById(target);

        if (defaultButton && "undefined" != typeof defaultButton.click) 
        {
            defaultButton.click();
            event.cancelBubble = true;
            if (event.stopPropagation) 
                event.stopPropagation();
            return false;
        }
    }
    return true;
}

Answer 2

It seems that the fix codesta.com that harpo link to is no longer necessary, since the fix event.srcElement is not integrade in ASP.NET 3.5. The implementation of DefaultButton does however still have some problems, because it is catching the Enter key press in too many cases. For example: If you have activated a button in the form using tab, pressing Enter should click on the button and not submit the form.

Include the following JavaScript code at the bottom of your ASP.NET web page to make Enter behave the way it should.

// Fixes ASP.NET's behavior of default button by testing for more controls
// than just textarea where the event should not be caugt by the DefaultButton
// action. This method has to override ASP.NET's WebForm_FireDefaultButton, so
// it has to included at the bottom of the page.
function WebForm_FireDefaultButton(event, target) {
  if (event.keyCode == 13) {
    var src = event.srcElement || event.target;
    if (!(
      src
      &&
      (
        src.tagName.toLowerCase() == "textarea"
        || src.tagName.toLowerCase() == "a"
        ||
        (
          src.tagName.toLowerCase() == "input"
          &&
          (
            src.getAttribute("type").toLowerCase() == "submit"
            || src.getAttribute("type").toLowerCase() == "button"
            || src.getAttribute("type").toLowerCase() == "reset"
          )
        )
        || src.tagName.toLowerCase() == "option"
        || src.tagName.toLowerCase() == "select"
      ) 
    )) {
      var defaultButton;
      if (__nonMSDOMBrowser) {
        defaultButton = document.getElementById(target);
      }
      else {
        defaultButton = document.all[target];
      }
      if (defaultButton && typeof (defaultButton.click) != "undefined") {
        defaultButton.click();
        event.cancelBubble = true;
        if (event.stopPropagation) event.stopPropagation();
        return false;
      }
    }
  }
  return true;
}

Answer 3

For this particular issue, the reason is because javascript generated by ASP.NET 2.0 has some IE only notation: event.srcElement is not availabe in FireFox (use event.target instead):

function WebForm_FireDefaultButton(event, target) {
if (!__defaultFired && event.keyCode == 13 && !(event.srcElement && 
(event.srcElement.tagName.toLowerCase() == "textarea"))) {
var defaultButton;
if (__nonMSDOMBrowser) {
defaultButton = document.getElementById(target);
}
else {
defaultButton = document.all[target];
}
if (defaultButton && typeof(defaultButton.click) != 
"undefined") {
__defaultFired = true;
defaultButton.click();
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
return false;
}
}
return true;
}

If we change the first 2 lines into:

function WebForm_FireDefaultButton(event, target) {
var element = event.target || event.srcElement;
if (!__defaultFired && event.keyCode == 13 && !(element && 
(element.tagName.toLowerCase() == "textarea"))) {

Put the changed code in a file and then do

protected void Page_Load(object sender, EventArgs e)
{
ClientScript.RegisterClientScriptInclude("js1", "JScript.js");
}

Then it will work for both IE and FireFox.

Source:

http://www.velocityreviews.com/forums/t367383-formdefaultbutton-behaves-incorrectly.html