{"name":"focus","type":"selector","title":":focus Selector","deprecated":null,"removed":null,"desc":"Selects element if it is currently focused.","categories":["selectors/basic-filter-selectors","selectors/form-selectors","version/1.6"],"entries":[{"return":"","signatures":{"added":"1.6"},"examples":{"desc":"Adds the focused class to whatever element has focus","code":"\n$( \"#content\" ).delegate( \"*\", \"focus blur\", function() {\n  var elem = $( this );\n  setTimeout(function() {\n    elem.toggleClass( \"focused\", elem.is( \":focus\" ) );\n  }, 0 );\n});\n","css":"\n  .focused {\n    background: #abcdef;\n  }\n","html":"\n<div id=\"content\">\n  <input tabIndex=\"1\">\n  <input tabIndex=\"2\">\n  <select tabIndex=\"3\">\n    <option>select menu</option>\n  </select>\n  <div tabIndex=\"4\">\n    a div\n  </div>\n</div>\n"},"longdesc":"\n    <p>As with other pseudo-class selectors (those that begin with a \":\"), it is recommended to precede <code>:focus</code> with a tag name or some other selector; otherwise, the universal selector ( \"*\" ) is implied. In other words, the bare <code>$( \":focus\" )</code> is equivalent to <code>$( \"*:focus\" )</code>.  If you are looking for the currently focused element, <code>$( document.activeElement )</code> will retrieve it without having to search the whole DOM tree.</p>\n  "}],"slug":"focus-selector"}