Tabbing through Inline Editable Elements
I have been spending a lot of time at work developing a method to edit data in-line on a web page simply by clicking on what you want to edit. The process is something along the lines of data from a database > display on the page > edit on the page > save back into database. This concept is seen a lot on various Google apps.
This is great, I won't go into the full method here however I do want to show how the JavaScript works, in particular how we tab through the in-line editable elements on a page. Unfortunately we can't rely solely on the tabindex attribute to hit and edit each editable element on a page. This is because the editable part of the data isn't displayed until you need to activate it and as a result has no tab order on the page.
Before I explain more, here are three elements, if you tab through the page you will eventually hit these elements which will immediately allow editing. Or you could choose one to click on and tab on from there... have a go.
To accomplish this we are setting the tabindex of each 'editable' element on the page and we are setting up events to trigger what should happen when someone tabs to the element. So as soon as you tab to an element which is editable it knows to change it's state to allow editing, then when you either tab away or change the data we can save what has been entered. This means any in-line editable data on a page becomes accessible again and much easier to use.
What I haven't shown here is how powerful in-line editing becomes when it's controlled by a server side language hitting a database. I'm sure if your reading this then you will also understand how you might use AJAX to accomplish saving results.
Tested to work in the following browsers;
- IE 7
- FireFox 2.0.0.7
- (inline editing works in all browsers but tabbing fails gracefully in Opera and Safari)