Hi All, I am very new to JavaScript. I have one HTML page which three buttons.I can use tab to move the focus from one button to other button. If user click any of the button i create one dialog. As dialog is there we can not click on any of the button presented in the page. But when user does tab, browser move the focus to the button then user can press the button using space bar. How to avoid movement of focus to go beyond the dialog. Please help me to resolve this issue
you need to trap the onkeydown/up event and then compare the keycode to tab, returning false / stopping event bubbling if it matches a tab. just google it - here is the first thing i found on the serps: http://freecode-freecode.blogspot.com/2007/06/how-to-catch-tab-key-press-with.html (not great but you get the idea) note, its much easier with a framework also and more cross browser compliant with the event handling.
Thanks for the prompt reply. I have tried this. It can work fine in Firefox as i stop the event bubbling but in case of IE it can not work. Still browser moves the focus to different buttons. How to control in IE?
as I said, each browser has its own idea as to how events need to take place. look at this example in mootools (a javascript framework) which rewrites and extends the browser's events so they are always rendering the same results: http://mooshell.net/g9nRV/ the trapped element is 2. All I do here is compare the passed event's key property and then stop the event bubbling in full on tab - note that in IE, a return false is not always with the same effects as a event.preventDefault(); in other browsers. coding that kind of thing on your own is like re-inventing the wheel http://www.mootools.net/docs/core/Native/Event -> look at things you can do with mootools events
I think event capturing is the solution for your problem. For detailed description and examples, visit the following sites: setCapture method, addEventListener method, attachEvent method.