Cách dùng :focus Selector trong jQuery
Focus Selector sẽ chọn phần tử đang được focus.
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
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
Cú pháp
jQuery( ":focus" )
Ví dụ
Tìm kiếm thẻ đang được focus và đổi màu nền cho chúng:
Code
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Học lập trình miễn phí tại freetuts.net</title> <script src="https://freetuts.net/cnd/js/jquery/jquery-3.2.1.min.js"></script> <style> .focused { background: #abcdef; } </style> </head> <body> <h1>Học lập trình miễn phí tại freetuts.net</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ả:
Bài viết này được đăng tại [free tuts .net]
Tham khảo: jquery.com