Làm cách nào để lấy yếu tố tập trung bằng jQuery?

Question

Sử dụng jQuery, làm thế nào tôi có thể nhận được phần tử đầu vào có tiêu điểm của con trỏ (con trỏ)?

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

Answer 1

// 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; 

Mà một trong những bạn nên sử dụng? trích dẫn số jQuery docs:

Như với bộ chọn giả lớp khác (bắt đầu bằng dấu ":"), bạn nên đặt trước: lấy tiêu điểm bằng tên thẻ hoặc một số bộ chọn khác; nếu không, 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 được tập trung, $ (document.activeElement) sẽ truy xuất nó mà không cần 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 có một đối tượng jQuery gói các yếu tố:

$(document.activeElement) 

Answer 2

$(document.activeElement) 

sẽ lấy nó mà không cần phải tìm kiếm trên toàn bộ cây DOM theo khuyến cáo trên jQuery documentation

Answer 3

Hãy thử điều này:

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

Answer 4

Tôi đã thử nghiệm hai các 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 đã chuyển sang 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ử được lấy nét.

(1). $(document.activeElement) trả về đầu vào: văn bản: tên như mong đợi trong Firefox, Chrome và Safari, nhưng nó trả về đầu vào: gửi: addPassword trong IE9

(2). $(':focus') lợi nhuận đầu vào: văn bản: tên 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> 

Answer 5

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

document.activeElement.id 

Tôi đang sử dụng IE8, và đã không kiểm tra 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 tối thiểu là 4 ký tự và tập trung trước khi diễn xuất. Khi bạn nhập số thứ 4, nó sẽ kích hoạt. Trường có id là 'year'. Tôi đang sử dụng ..

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