:focusable Selector

focusable selector

Description: Selects elements which can be focused.

jQuery( ":focusable" )

Some elements are natively focusable, while others require explictly setting a tab index. In all cases, the element must be visible in order to be focusable.

Elements of the following type are focusable if they are not disabled: input, select, textarea, button, and object. Anchors are focusable if they have an href or tabindex attribute. area elements are focusable if they are inside a named map, have an href attribute, and there is a visible image using the map. All other elements are focusable based solely on their tabindex attribute and visibility.

Note: Elements with a negative tab index are :focusable, but not :tabbable.

Example:

Select focusable elements and highlight them with a red border.

                                  
                                    
                                      
                                        <!doctype html>
                                      
                                    
                                  
                                  
                                    
                                      
                                        <html lang="en">
                                      
                                    
                                  
                                  
                                    
                                      
                                        <head>
                                      
                                    
                                  
                                  
                                    
                                        <meta charset="utf-8">
                                    
                                  
                                  
                                    
                                        <title>focusable demo</title>
                                    
                                  
                                  
                                    
                                        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
                                    
                                  
                                  
                                    
                                        <style>
                                    
                                  
                                  
                                    
                                        input, a, p {
                                    
                                  
                                  
                                    
                                          border: 1px solid #000;
                                    
                                  
                                  
                                    
                                        }
                                    
                                  
                                  
                                    
                                        div {
                                    
                                  
                                  
                                    
                                          padding: 5px;
                                    
                                  
                                  
                                    
                                        }
                                    
                                  
                                  
                                    
                                        </style>
                                    
                                  
                                  
                                    
                                        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                                    
                                  
                                  
                                    
                                        <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
                                    
                                  
                                  
                                    
                                      
                                        </head>
                                      
                                    
                                  
                                  
                                    
                                      
                                        <body>
                                      
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      
                                        <div>
                                        <input value="text input">
                                        </div>
                                      
                                    
                                  
                                  
                                    
                                      <div><a>anchor without href</a></div>
                                    
                                  
                                  
                                    
                                      <div><a href="#">anchor with href</a></div>
                                    
                                  
                                  
                                    
                                      <div><p>paragraph without tabindex</p></div>
                                    
                                  
                                  
                                    
                                      <div><p tabindex="1">paragraph with tabindex</p></div>
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      
                                        <script>
                                        
                                      
                                    
                                  
                                  
                                    
                                      $( ":focusable" ).css( "border-color", "red" );
                                    
                                  
                                  
                                    
                                      
                                        </script>
                                      
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      
                                        </body>
                                      
                                    
                                  
                                  
                                    
                                      
                                        </html>

POWERED BYHERONOTE

previous page start next page

:focusable Selector

jQuery

focusable selector

jQuery( ":focusable" )

Select focusable elements and highlight them with a red border.