DefaultButton and DefaultFocus in Internet Explorer 11

Question

I have an ASP.NET page that contains an iframe. Inside that iframe, there is a form with a DefaultFocus and a DefaultButton set, as shown below.

<form id="Form1" method="post" runat="server" defaultfocus="txtSearchPhrase" defaultbutton="btnSearch">

When viewing this page in IE11, all of the content inside of the iframe appears to be shifted off the left side of the screen by about 100px or so. This does not happen in any other browser, including IE10.

If I remove the DefaultButton and DefaultFocus from the form, the problem disappears. I can then use Javascript to manually hookup the default button and focus, but since I have many different pages that are potentially rendered inside the iframe, it's not ideal to have to change each and every one of those pages.

Does anyone know what's causing this or if there's a better way to address it?

Answer 1

I looked into this and found some interesting things.

First, when you include DefaultFocus or DefaultButton on a form in ASP .NET WebForms, ASP .NET will automatically emit two things:

1. The definition of a WebForm_AutoFocus method.
2. A call to this method, which looks something like: WebForm_AutoFocus('defaultFocusElementID'); It does this for both DefaultFocus and DefaultButton settings, though I'm not sure why it needs to do this for the DefaultButton setting.

The WebForm_AutoFocus method attempts to call the scrollIntoView method on the element, but only if the browser is detected as a "non MS DOM" browser. Strangely enough, IE11 is not considered an MS DOM browser, at least as far as this method is concerned. So the scrollIntoView method is designed to run on browsers which are not IE.

I suppose one could argue the bug is with the implementation of the scrollIntoView method in IE11, but it could also be viewed as a bug in the MS JS library which detects whether the browser is an MS DOM browser. I'm not sure - either way, I blame Microsoft. :)

I recommend not using DefaultFocus and DefaultButton from a philosophical perspective because these are Microsoft-specific things, and when you can keep your code away from Microsoft-specific things, you usually should. Especially when using the "Microsoft way" is totally broken. Rather, try something like this (if you're using jQuery):

<form data-defaultfocus="search">
  <asp:TextBox ID="search" />
</form>

<script type="text/javascript">

  // jQuery on document ready
  $(function() {
    var form = $('form'),
      defaultButtonID,
      defaultFocusID;

    if (form.data('defaultfocus')) {
      defaultFocusID = form.data('defaultfocus');

      $('#' + defaultFocusID).focus();
    }

    if (form.data('defaultbutton')) {
      defaultButtonID = form.data('defaultbutton');

      form.on('keypress', function(event) {
        if (event.keyCode === 13) {
          __doPostBack(defaultButtonID, '');
        }
      });
    }
  });

</script>

This is not tested code, but you get the idea. Then you can go through and use data-defaultbutton and data-defaultfocus on your form elements instead of the Microsofty way of doing it, and it will actually work, and if it doesn't, you can fix it, because you control the code!

I hope this helps.

Update

I found this Microsoft KB article which discusses a .NET 4 patch. Issue 2 on this page appears to address an issue which might be the one you described.

When you access an ASP.NET-based webpage by using Internet Explorer 11, the webpage renders the content incorrectly.

Note This issue occurs because Internet Explorer 11 is not recognized as Internet Explorer by ASP.NET.

I haven't tried it out yet, but it seems like this would fix it.