Wednesday, 15 January 2014

Controling tabbing focus within popup javascript widget context -


I am working on a lightbox style javascript plugin that pops up an image with the next + previous button and a close button Does. I want to make it so that tabbing only jumped between three presented buttons in the popup, do not go through three of them and then continue the page content in the background.

Does anyone have any suggestions, the best way to do this, I am currently thinking that pop-up is the best way to create an array of tabbable elements and focus on each tab. Capture tab to focus and prevent default tab behavior. / P>

Does anybody know if there is any best practice about this?

To set the tabindex property of the possible solution elements, Code> -1 do not want to be Tabbed.

  & lt; Div & gt; & Lt; Input type = "button" value = "tabby one" /> & Lt; Input type = "button" value = "two tabbed" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; Input type = "button" value = "no tabby" tabindex = "- 1" /> & Lt; Input type = "button" value = "not tabable" tabindex = "- 1" /> & Lt; / Div & gt;  

Although I did not find it in any documentation, so far it seems to work in all test browsers (FF 3.5, IE 6 and 7, Opera 9.64).

Another way would be blur () when an unwanted element gets focused:

   & Lt; Input type = "button" value = "two tabbed" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; Input type = "button" value = "tab not" onfocus = "blur ()" /> & Lt; Input type = "button" value = "is also not tabable" onfocus = "blur ()" /> & Lt; / Div & gt; The disadvantage of this approach is that as soon as you kill the "unmanageable" element, no element will be chosen and the next tab will start from the very first element. This is especially difficult when rehearsing backwards, which is no longer possible. The solution to this will be to actively focus the following true element:  
  & lt; Div & gt; & Lt; Input id = "first tabbell" type = "button" value = "tabby one" /> & Lt; Input type = "button" value = "two tabbed" /> & Lt; Input id = "lastTabbable" type = "button" value = "tabbed three" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; Input type = "button" value = "tab can not be" onfocus = "blur (); $ ('firstTabbable'). Focus ();" /> & Lt; Input type = "button" value = "not even on tab" onfocus = "blur (); $ ('lastTabbable'). Focus; /> & Lt; / Div & gt;  

However, in my opinion this is a bit too complex.


No comments:

Post a Comment