JQuery API: :focus Selector

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

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ả:

 

Tham khảo: jquery.com

Nguồn: freetuts.net