Setting the Default Input Focus and Default Button with jQuery: Thin ASP.NET 5

Today I want to keep extending my series on Thin ASP.NET by adding some more user experience features, Default Focus and Default Button. Early in my windows experience (circa 1992) I learned a truth, that keyboarding through a form is so much faster than using the nifty little mouse I could now really leverage. That's right, good old fashion TAB, or Ctrl+N, etc is much more efficient than using the mouse to move, point, click, move click, etc. Another truth of computer use I have also found universal is people who spend the majority of their work time entering data into software forms know the truth of keyboarding and use it 100% of the time, without even thinking why.

I hope these two truths have also been accepted by you even before you just read it, or at least you said to yourself 'that makes sense'. Because folks entering data over and over want to be as efficient as possible and not have to think. There are two things we can easily do to a web form to create a superior user experience through the use of the keyboard, define the initially focused input field and the default button, or the button/action that will be executed when a user presses the ENTER key.

This always seemed to be an issue with the earlier versions of ASP.NET because there was nothing just built into the Web Form and Web Controls infrastructure to just designate these defaults. When ASP.NET 2.0 was released a DefaultButton property was added to both the Form and Panel controls. Simply put, all you needed to do was set the DefaultButton property to the ID of the button you wanted to be clicked when the user hit the ENTER key. The controls would then generate some inline JavaScript to set this feature up for you. The Form control also added the DefaultFocus property, which when an input control's ID was passed to it would also cause JavaScript to be generated on the page to set the initial TextBox, DropDown, etc to be in focus when the page was loaded by the browser.

<

form

id

="form1"

runat

="server"

defaultbutton

="btnSubmit"

defaultfocus

="FirstName"

>

But this is not a series about working with ASP.NET Web Controls, but rather how to architect our ASP.NET web pages to be leaner and meaner. In the past few installments I started demonstrating how to leverage jQuery to accomplish these goals. Today I am going to show how to set a form's initially focused input element as well as the default button.

jQuery defines several event handlers, focus is triggered when a user enters an input field. By defining a function to be called when an element receives focus you can cause the page to perform designated actions. This is identical in nature to event handlers we are all familiar with when defining server-side event handlers, but all handled on the client-side. The focus event can be triggered by simply calling the focus method from the element(s) itself. Using a jQuery selector the focus event for all matching elements can be triggered. Typically you would only want to set this for the initial input field like this:

 

$(document).ready(

function

() { $(

'#FirstName'

).focus();});

Note you must include an id attribute in the input field to select using the above syntax. I forgot this when I first tested my script and I do not want you to waste time like I did being a numskull.

<

p

>

<

label

id

="lblFirstName"

for

="FirstName"

>

First Name :

</

label

>

<

input

name

="FirstName"

id

="FirstName"

type

="text"

maxlength

="25"

class

="required"

/>

</

p

>

Now when the page is loaded the user's cursor is already in the first input element of the contact form. Now they can just start typing and filling in the form naturally, without thinking.

Now to set the default button for the form. Typically you will have more than one button as part of a form's composition. Maybe a Cancel, Submit and possible Apply or Reset. Most likely the Submit button holds the key to the desired behavior when the user presses the ENTER key. I found a good article explaining how to set a form's default button behavior with jQuery. I did change the code from the article by making it only return true. I did this because returning false from the method ended processing and therefore no validation would be executed and of course the form would not be submitted to the server. By returning true you allow the next natural activity occur, in the case of the contact form that would be validation.

$(document).ready(

function

() { $(

"form input"

).keypress(

function

(e) {

if

((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { $(

'button[type=submit] .default'

).click();

return

true

; } });});

The selector to designate the keypress event functionality contains a form and input element. This is key because this selector, 'form input', tells jQuery to assign this function to be executed anytime the ENTER key is pressed when the focus is on any input element inside of any form. If you have a few year's development experience under your belt you understand the use of the keycode and which properties. The number 13 is the ASCII code for the ENTER key and the keycode and which properties deal with keyboard input from the browser.

If the ENTER key was pressed the next selector calls the click event for any button element of type='submit' with the CSS class of 'default'. All of those items are really important to understand because it is a more advanced CSS selector designation. But basically it will match any submit button with the class of 'default' assigned to it. This will force a strong delineation from any other buttons on the page. You still have the responsibility to limit assigning the 'default' class to only one button. You could extend the selector and add a form id, etc. I plan on writing more about CSS selectors soon, but if you want the primer on CSS selectors, visit the w3.org site.

These are a couple of very simple tips to help you make a more effective user experience on your forms. Just like we saw in the entry on jQuery Validation, this script will also work using the selector scheme with ASP.NET Web Controls. This makes it very easy to leverage the jQuery framework to set these features for any ASP.NET web page.

Share This Article With Your Friends!