Some keyboard-friendly DHTML tricks

Here are some DHTML tricks i've been using to make the user experience a bit more keyboard-friendly. These are all asp.net specific, but general in nature. First up, I want to set the input focus to a specific textbox by default, so the user doesn't have to click on it to begin typing. Add the following line just under your textbox in the aspx page:

<script>$('<%= txtMyTextBox.ClientID %>').focus();</script>

Next up, i want it to leave an 'edit' page and jump back to an item listing page if the user hits escape, rather than having to click on a 'cancel' link. To do this, i add this somewhere in the aspx page:

<script>
   // So that when the user hits escape it will return to the list
   // http://users.fmg.uva.nl/rgrasman/jscript/2005/07/capturing-escape-esc-key-in-javascript.html
   function keyPressHandler(e) {
      var kC  = (window.event) ?    // MSIE or Firefox?
                 event.keyCode : e.keyCode;
      var Esc = (window.event) ?   
                27 : e.DOM_VK_ESCAPE // MSIE : Firefox
      if(kC==Esc)
        window.location='BinTable.aspx';
   }
   document.body.onkeypress = function(e) {keyPressHandler(e);};
   </script>

Finally, i want the application to click a certain 'save' button when the user hits enter. To do this, surround all the controls in a panel, and set its 'DefaultButton' setting:

<asp:Panel ID="pnlSearch" runat="server" DefaultButton="bnGo">
    <p>
      Search:
      <asp:TextBox ID="txtSearch" runat="server" Columns="6"></asp:TextBox>
      <asp:Button ID="bnGo" runat="server" Text="Go" OnClick="bnGo_Click" />
    </p>
  </asp:Panel>

With these simple changes, my page is now a whole lot more keyboard friendly, which is much faster for a power user.

Thanks for reading! And if you want to get in touch, I'd love to hear from you: chris.hulbert at gmail.

Chris Hulbert

(Comp Sci, Hons - UTS)

Software Developer (Freelancer / Contractor) in Australia.

I have worked at places such as Google, Cochlear, Assembly Payments, News Corp, Fox Sports, NineMSN, FetchTV, Coles, Woolworths, Trust Bank, and Westpac, among others. If you're looking for help developing an iOS app, drop me a line!

Get in touch:
[email protected]
github.com/chrishulbert
linkedin

Subscribe via RSS