You develop a webapp, you have a couple of input fields and buttons on your page. Then the requirement arrives. The customer wants his data to be auto-filled once he enters some identification number (the italian fiscal code). And then, when the data has been filled correctly, he wants the focus to be placed in the 1st empty text box in order to accelerate any further elaboration on that data. Oh ...man!
Well, the customer is the boss, right? If you live in the ASP.net WebForms world, such features immediately scare every developer. To realize them you have to deal with auto-postbacks, page refreshes, viewstate....all in all it ends in a mess to code, and it's a pain for the end-user. Let's not speak about UpdatePanels here, ok? Basically, you have to realize it in JavaScript to get a better user-experience. The problem is that if you have a hybrid situation where you mix JavaScript code with ASPX/ASCX code, it gets a little messy. You have to remember the generated ASP ClientIDs and correctly integrate them in your JavaScript code.
To not completely get lost in this post :), what I wanted to express is how easy it is to implement all this in JavaScript making use of jQuery:
$("#divPersonData").find("input:text[value='']:visible").first().focus();
Setting the focus to the first empty field is really just fun, right?
The essence of this post is that the UI experience gets more and more important in nowadays webapps. Just look around,
Twitter,
Trello,
Gmail,...Think about it if you still live in the somewhat more traditional space of web development.
Update:You might want to take a look at the HTML5
autofocus attribute
here.
Questions? Thoughts? Hit me up
on Twitter
