Làm thế nào để bạn xóa trọng tâm trong javascript?


158

Tôi biết điều này không khó lắm, nhưng tôi không thể tìm thấy câu trả lời trên Google.

Tôi muốn thực thi một đoạn javascript sẽ xóa tiêu điểm khỏi bất kỳ yếu tố nào. Nó phải hoạt động trên firefox 2 cũng như các trình duyệt hiện đại hơn.

Có một cách tốt để làm điều này?


tập trung rõ ràng có nghĩa là gì? - nó có giống như mờ không?
lập kế hoạch

3
Tôi muốn làm cho nó để không có yếu tố nào trong trình duyệt tập trung.
Andres

Câu trả lời:


169

Câu trả lời: document.activeElement

---biên tập----

Về mặt kỹ thuật: document.activeElement.blur()

---- chỉnh sửa 2 ----

function onElementFocused(e)
{
    if (e && e.target)
        document.activeElement = e.target == document ? null : e.target;
} 

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);

8
Nếu Firefox 2, với 0,66% chia sẻ trình duyệt, là một công cụ giải quyết ... Tôi có một bản sửa lỗi, đó là trong câu trả lời được chỉnh sửa của tôi.
JPS

20
Trong năm 2013, tỷ lệ trình duyệt của Firefox 2 thấp hơn 0,66% và đơn giản document.activeElement.blur()là cách tốt nhất để đạt được hiệu ứng này.
cheyey

88

.focus()và sau đó .blur()một cái gì đó khác tùy ý trên trang của bạn. Vì chỉ một phần tử có thể có tiêu điểm, nó được chuyển đến phần tử đó và sau đó bị xóa.


Có cách nào để làm cho một yếu tố vô hình có trọng tâm?
Andres

1
Tôi không phải là một chuyên gia về cách tốt nhất để làm điều đó; nhưng bạn chắc chắn có thể định vị nó ngoài màn hình hoặc bên ngoài giới hạn của một overflow: clipyếu tố theo kiểu. Nhưng bạn chỉ có thể sử dụng một trường đã tồn tại trên trang. Hoặc tạo một cái chỉ cho mục đích và loại bỏ nó một lần nữa.
Kevin Reid

Tôi nghĩ rằng việc đặt tiêu điểm thành một phần tử ngoài màn hình sẽ buộc cuộn đến phần tử đó. Tuy nhiên, bạn có thể tạo ra một yếu tố vô hình cho mục đích. Điều đó đang được nói, một số trình duyệt có thể có một thời gian khó để loại bỏ dấu mũ. Chỉ cần làm mờ () có thể sẽ làm việc tốt hơn. Bạn vẫn có thể nhận được các khóa với trình xử lý sự kiện keyup (keydown).
Alexis Wilke

5
Câu trả lời này đã hết hạn và không áp dụng trong năm 2017. Thay vào đó, hãy sử dụng activeEuity, như trong stackoverflow.com/a/2520670/39808
Paul Fisher

Nó vẫn hoạt động, chỉ lâu hơn và di chuyển tiêu điểm (có thể ảnh hưởng đến điều hướng TAB) Ngoài ra, nó không rõ ràng ngay lập tức "cái gì khác tùy ý".
dùng202729

49
document.activeElement.blur();

Hoạt động sai trên IE9 - nó làm mờ toàn bộ cửa sổ trình duyệt nếu phần tử hoạt động là phần thân tài liệu. Tốt hơn để kiểm tra cho trường hợp này:

if (document.activeElement != document.body) document.activeElement.blur();

17

Không có câu trả lời nào được cung cấp ở đây là hoàn toàn chính xác khi sử dụng TypeScript, vì bạn có thể không biết loại phần tử được chọn.

Điều này do đó sẽ được ưu tiên:

if (document.activeElement instanceof HTMLElement)
    document.activeElement.blur();

Tôi cũng không khuyến khích sử dụng giải pháp được cung cấp trong câu trả lời được chấp nhận, vì kết quả làm mờ không phải là một phần của thông số chính thức và có thể bị hỏng bất cứ lúc nào.


6
Thật vui khi thấy một câu hỏi tôi đã hỏi lại vào năm 2010 tiếp tục có một câu trả lời phát triển như thế nào.
Andres


0

Bạn có thể gọi window.f Focus ();

nhưng di chuyển hoặc mất tiêu điểm chắc chắn sẽ can thiệp vào bất cứ ai sử dụng phím tab để đi xung quanh trang.

bạn có thể nghe mã khóa 13 và báo trước hiệu ứng nếu nhấn phím tab.


-3

Với jQuery, nó chỉ là: $(this).blur();


2
Đây là một câu trả lời cũ để bây giờ bạn có thể biết, nhưng có hai lý do câu trả lời này không được áp dụng. 1. Nó giả sử OP đã sử dụng jquery, 2. thiscần phải là yếu tố tập trung, trong khi câu hỏi nói rõ rằng OP không biết yếu tố tập trung trước thời hạn.
Brandon
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.