:focus 选择器
分类:选择器 > 基本筛选选择器 | 选择器 > 表单选择器
focus selector
描述:选择当前正获得焦点的那个元素。
加入于: 1.6
jQuery( ":focus" )与别的伪类选择器一样(它们以一个“:”开头),建议在它前面用一个标签名或者别的选择器,否则,会潜在地使用普遍选择器("*"
)。换句话说,光裸的$( ":focus" )
等同于$( "*:focus" )
。如果你正在查找当前获得焦点的元素,$( document.activeElement )
就可以检索到它,而不需要搜遍整个DOM树。
示例
把“focused”类添加到任一个获得焦点的元素上:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>focus demo</title> <style> .focused { background: #abcdef; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div id="content"> <input tabIndex="1"> <input tabIndex="2"> <select tabIndex="3"> <option>select menu</option> </select> <div tabIndex="4"> a div </div> </div> <script> $( "#content" ).delegate( "*", "focus blur", function() { var elem = $( this ); setTimeout(function() { elem.toggleClass( "focused", elem.is( ":focus" ) ); }, 0 ); }); </script> </body> </html>