So today at work I found the need for a way to manage the focus and blur of input and select elements based on grouping. The idea being that when you click in an item of the group, the group get’s focus and it’s focus event is triggered, you can then do what you will with the rest of the elements in the group however when you click on an element outside the group it will fire a blur event.
The code is simple enough, and infact I managed to throw something useful together on my lunch hour so I thought I would share it with you all. If you want to play with this new plugin take a look on github.
I haven’t had time to through a demo together but basically it works using an element (whether that be a fieldset, div, section) wrapped arround your elements as a container of the group. When user clicks on any element the focused element is logged temporarily within the focusGroup namespace, if you click another element in the group you do not get a blur event as its same group but if you click on an element outside the group you will get the blur event for that group. This is great for validation as it overcomes the limitations of the jQuery validate plugin (which I plan to make changes to myself to incorporate something like this for grouped fields and attempt to get my changes implemented into the main repo)
Anyway play, have fun and if you make changes or feature requests push them to the repo for me, open source is collaboration, so lets collaborate.