Làm thế nào để có được phần tử tập trung với jQuery?

Sử dụng jQuery, làm cách nào tôi có thể lấy phần tử đầu vào có tiêu điểm của dấu mũ (con trỏ)?

Hay nói cách khác, làm thế nào để xác định xem đầu vào có tập trung vào dấu mũ không?

// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

Bạn nên sử dụng cái nào? trích dẫn các tài liệu jQuery :

Cũng như các bộ chọn lớp giả khác (những bộ bắt đầu bằng dấu ":"), nên đi trước: tập trung với tên thẻ hoặc một số bộ chọn khác; mặt khác, bộ chọn phổ quát ("*") được ngụ ý. Nói cách khác, trần $(':focus')là tương đương với $('*:focus'). Nếu bạn đang tìm kiếm phần tử hiện đang tập trung, $ (document.activeEuity) sẽ truy xuất nó mà không phải tìm kiếm toàn bộ cây DOM.

Câu trả lời là:

document.activeElement

Và nếu bạn muốn một đối tượng jQuery bao bọc phần tử:

$(document.activeElement)

$( document.activeElement )

Sẽ truy xuất nó mà không phải tìm kiếm toàn bộ cây DOM như được đề xuất trên tài liệu jQuery

Tôi đã thử nghiệm hai cách trong Firefox, Chrome, IE9 và Safari.

(1). $(document.activeElement)hoạt động như mong đợi trong Firefox, Chrome và Safari.

(2). $(':focus')hoạt động như mong đợi trong Firefox và Safari.

Tôi di chuyển vào chuột để nhập 'tên' và nhấn Enter trên bàn phím, sau đó tôi cố gắng lấy phần tử tập trung.

(1). $(document.activeElement)trả về đầu vào: text: name như mong đợi trong Firefox, Chrome và Safari, nhưng nó trả về đầu vào: submit: addPassword trong IE9

(2). $(':focus')trả về đầu vào: text: name như mong đợi trong Firefox và Safari, nhưng không có gì trong IE

<form action="">
    <div id="block-1" class="border">
        <h4>block-1</h4>
        <input type="text" value="enter name here" name="name"/>            
        <input type="button" value="Add name" name="addName"/>
    </div>
    <div id="block-2" class="border">
        <h4>block-2</h4>
        <input type="text" value="enter password here" name="password"/>            
        <input type="submit" value="Add password" name="addPassword"/>
    </div>
</form>

Thử cái này:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});

Làm thế nào là nó không ai đã đề cập ..

document.activeElement.id

Tôi đang sử dụng IE8 và chưa thử nghiệm nó trên bất kỳ trình duyệt nào khác. Trong trường hợp của tôi, tôi đang sử dụng nó để đảm bảo một trường có tối thiểu 4 ký tự và tập trung trước khi hành động. Khi bạn nhập số thứ 4, nó sẽ kích hoạt. Trường có id là 'năm'. Tôi đang dùng..

if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
    // action here
}

$(':focus')[0] sẽ cung cấp cho bạn các yếu tố thực tế.

$(':focus') sẽ cung cấp cho bạn một loạt các yếu tố, thường chỉ có một yếu tố được tập trung tại một thời điểm vì vậy điều này chỉ tốt hơn nếu bạn bằng cách nào đó có nhiều yếu tố tập trung.

Thử cái này::

$(document).on("click",function(){
    alert(event.target);
    });

Nếu bạn muốn xác nhận nếu tiêu điểm là với một yếu tố thì

if ($('#inputId').is(':focus')) {
    //your code
}