Asp.Net Form DefaultButton Error in Firefox

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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;
}

Method 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;
}

Method 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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x