Simplifying the edit in place behavior

Last week, I wrote about building a simple behavior to edit text in place. Almost at the same time, Nikhil was building a similar component for Silverlight, but it was considerably simpler because instead of substituting a label for the textbox on blur, he was just changing the border so that the textbox resembles a label. This is a lot simpler, cleaner and more stable. The textbox always behaves according to what one would expect from a textbox because it never ceases to be a textbox. No focus to manage, nothing to hide and show, just styles to change.

I had actually already done a similar simplification from Nikhil’s original behavior that he wrote a few years ago by not handling the hover effect from the component but from CSS. Changing a style on hover is now best done by adding a “:hover” style, which all modern browsers can handle on any element.

We could in principle take this simplification all the way and get rid of the behavior altogether to rely only on CSS if all modern browsers could handle CSS 2.1’s “:focus” pesudo-class. Unfortunately as of today, even in version 8, Internet Explorer does not. It should in RTM as it is supposed to fully support CSS 2.1 but that won’t be usable for a while as previous versions will remain prevalent for some more time.

Anyway, I modified the behavior to use that method of restyling instead of the label substitution used before and was able to reduce the code size further down to 70 lines. You can download the updated behavior from here:

http://weblogs.asp.net/blogs/bleroy/Samples/EditInPlace/EditInPlace.js.txt