Tiêu điểm jquery không kích hoạt tiêu điểm css

Question

Dường như có sự cố khi đặt tiêu điểm thành một phần tử bằng cách sử dụng jquery. Nó dường như không kích hoạt thuộc tính: focus css được đặt trên một phần tử.

Ví dụ trong css của tôi, tôi có:

div.item1:focus { border:2px solid red; } 

trong jquery của tôi, tôi có:

$("div.item1").focus(); 

Trọng tâm được thiết lập nhưng không có đường viền màu đỏ áp dụng cho nguyên tố này.

Answer 1

div yếu tố không sử dụng bộ chọn :focus .. thấy the CSS2 spec

Các: tập trung pseudo-class áp dụng trong khi một phần tử có trọng tâm (chấp nhận sự kiện bàn phím hoặc các hình thức nhập văn bản).

Bạn có thể làm điều này:

.hoverclass { border:2px solid red; } 

$("div.item").hover(function() { 
    $(this).addClass('hoverclass') 
},function() { 
    $(this).removeClass('hoverclass') 
}); 

này sử dụng .hover(), .addClass() và .removeClass()

Answer 2

focus() là chỉ sử dụng được với các yếu tố hình thức và liên kết, và wont work nếu bạn cố gắng sử dụng nó trên khác loại yếu tố.

Xem jQuery doc for focus() để biết thêm thông tin,

Answer 3

Từ the manual:

Sự kiện trọng tâm sẽ được gửi đến một phần tử khi nó giành lấy nét. Sự kiện này có thể áp dụng hoàn toàn cho một tập hợp các phần tử giới hạn, chẳng hạn như các thành phần (<input>, <select>, v.v.) và liên kết (<a href>). Trong các phiên bản trình duyệt gần đây, sự kiện có thể được mở rộng để bao gồm tất cả các phần tử các loại bằng cách đặt rõ ràng thuộc tính tabindex của phần tử. Phần tử có thể lấy nét thông qua các lệnh bàn phím, chẳng hạn như phím Tab hoặc bằng cách nhấp chuột vào phần tử.

Xem câu trả lời này cho một ví dụ: https://stackoverflow.com/a/5966034/1013082

Answer 4

Bạn cần phải làm điều này:

$("div.item1").focus(function(){ 
     $("div.item1").css("border","2px solid red"); 
     }); 

Answer 5

Đến trang jQuery tập trung() để xem:

Sự kiện tiêu điểm được gửi đến một phần tử khi nó tăng tiêu điểm. Sự kiện này có thể áp dụng hoàn toàn cho một tập hợp các phần tử giới hạn, chẳng hạn như các thành phần (<input>, <select>, v.v.) và liên kết (<a href>). Trong các phiên bản trình duyệt gần đây, sự kiện có thể được mở rộng để bao gồm tất cả các phần tử các loại bằng cách đặt rõ ràng thuộc tính tabindex của phần tử. Phần tử có thể lấy nét thông qua các lệnh bàn phím, chẳng hạn như phím Tab hoặc bằng cách nhấp chuột vào phần tử.

Đến nghiên cứu PPK của tập trung trên các trình duyệt ở đây

PPK focus Event Browser compatibility

Dường như tất cả các trình duyệt thông qua các thử nghiệm tabIndex.

Answer 6

divs có thể được tập trung nếu chúng có thuộc tính tabindex. Xem câu trả lời này ở đây:

https://stackoverflow.com/a/11928222/706284