restrict focus on particular div

Question

I have a popup div which has lot of controls. If i press on tab continiously the focus must not leave from the div to parent form.How to do this? Thanks

Answer 1

In the onblur event of the last control move the focus to the first control inside the div.

Answer 2

try using a modal div if you want to absolutely ensure that the focus doesn't leave.

Answer 3

This is not possible to enforce in plain HTML.
There are however quite some scripts out there that take care of this for you. I would strongly suggest to use one of them as there are quite some problems that need to be addressed (A dropdown might appear in front of your modal div).

If you are using asp.net you can check out the ajax control toolkit which has a modal popup dialog.

Nearly every decent javascript framework has plugins to accomplish this aswell. I happen to work a lot with jQuery which has a number of plugins to handle this:

• jQuery Block UI (http://malsup.com/jquery/block/#dialog)
• jQuery Popup Dialog (http://vision-media.ca/resources/jquery/jquery-popup-plugin-review)
• jQuery modal dialog boxes (http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/)
• ... there are a lot more to be found at http://plugins.jquery.com/search/node/popup

And if you find the need to make one yourself, here is a tutorial on how to do it using jQuery: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Good luck with finding a solution that fits you best!