Fixing AutoPostBack Keyboard Usability Issues

Anyone that's worked with ASP.NET Web Forms knows about the AutoPostBack property and has implemented it more than once. It's a great way to make developing applications faster but it comes at a cost.

While making a developer's life easier, AutoPostBack True hampers the end user's experience. Anytime the arrow keys are used or a letter is pressed to quickly navigate the list, ASP.NET steps in and fires off the PostBack. Not only is the user not expecting this but it causes focus and scroll positions to be lost, making keyboard navigation impossible.

The cause for the immediate PostBack is how AutoPostBack is implemented. When the AutoPostBack property is set to True, ASP.NET writes out an onchange attribute to the list

onchange="javascript:setTimeout('__doPostBack(\'ctl00$pageContent$ddlList\',\'\')', 0)"

onchange is fired and the script executed on every change of the selected value- keying down through the list is a change, pressing 'M' to jump to the 'M's in the list is a change.

To improve the end user's experience, the change event should only be fired when the user navigates away from the list, clicks to select an item, or presses the enter key while on a item. If we improve the user's experience, we slow down the developer. Each list can no longer use AutoPostBack and instead the developer must handle the OnBlur, OnClick, and OnKeyPress events for each list.

To make the developer's life easier again, I've created a plugin that does the work. AutoPostBack-Fix can be found on GitHub https://github.com/bstruthers/AutoPostBack-Fix and is released under the MIT license. The AutoPostBack-Fix plugin will automatically remove the onchange property and add handlers for the OnBlur, OnClick, and OnKeyPress events.

AutoPostBack-fix comes in two forms, Vanilla JS and jQuery. If you're already using jQuery, implementing the plugin with ASP.NET Web Forms is straightforward:

// Find all lists with the onchange property set (AutoPostBack="true")
// and attach the AutoPostBack-Fix plugin
$('select[onchange^=javascript\\:setTimeout]').autoPostBackFix();

If you're not using jQuery, you can still use the plugin:

var list       = document.getElementById('ddlList'),
    listHander = new bstruthers.AutoPostBackFix(list);

See the README.md file in the GitHub repository for more details. Right now AutoPostBack-Fix is 0.1.0 but it has been tested against WinXP: IE7 & IE8; Win7: IE7, IE8, IE9, IE10, FireFox, FireFox Nightly, Chrome & Chrome Canary; Ubuntu: FireFox, Chrome, Chrome Canary and is production ready.