:focus Selector trong jquery
Focus Selector sẽ chọn phần tử đang được focus. Cũng giống như những selector giả định khác(những selector bắt đầu bằng ":") bạn nên đặt trước nó một tên thẻ hoặc một selector khác, nếu không nó sẽ được hiểu là bộ chọn toàn bộ("*"), nói các khác $( ":focus" ) tương đương với $( "*:focus" ...
Focus Selector sẽ chọn phần tử đang được focus.
Cũng giống như những selector giả định khác(những selector bắt đầu bằng ":") bạn nên đặt trước nó một tên thẻ hoặc một selector khác, nếu không nó sẽ được hiểu là bộ chọn toàn bộ("*"), nói các khác $( ":focus" ) tương đương với $( "*:focus" ), do đó nếu bạn muốn tìm phần tử hiện đang được focus, $( document.activeElement ) sẽ trả về phần tử đó mà không phải tìm kiếm toàn bộ các phần tử DOM.
Cú pháp
1 | jQuery( ":focus" ) |
Ví dụ
Tìm kiếm thẻ đang được focus và đổi màu nền cho chúng:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title>Học lập trình miễn phí tại code24h.com</title> <style> .focused { background: #abcdef; } </style> </head> <body> <h1>Học lập trình miễn phí tại code24h.com</h1> <div id= "content" > <input tabIndex= "1" > <input tabIndex= "2" > <select tabIndex= "3" > <option>select menu</option> </select> <div tabIndex= "4" > a div </div> </div> <button onclick= "myFunction()" >Click vào đây sau đó focus vào các thẻ để xem kết quả</button> <script> function myFunction(){ $( "#content" ).delegate( "*" , "focus blur" , function () { var elem = $( this ); setTimeout( function () { elem.toggleClass( "focused" , elem.is( ":focus" ) ); }, 0 ); }); } </script> </body> </html> |
Kết quả:
Tham khảo: jquery.com
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com