Jak wyczyścić fokus w javascript?


159

Wiem, że to nie powinno być takie trudne, ale nie mogłem znaleźć odpowiedzi w Google.

Chcę wykonać skrypt javascript, który usunie fokus z dowolnego elementu, na którym się znajduje, bez wcześniejszej wiedzy, na którym elemencie jest fokus. Musi działać na Firefox 2, a także na nowszych przeglądarkach.

Czy jest na to dobry sposób?


co to znaczy jasne skupienie? - czy to to samo co rozmycie?
plodder

3
Chcę, aby żaden element w przeglądarce nie był aktywny.
Andres

Odpowiedzi:


170

Odpowiedź: document.activeElement

Aby robić, co chcesz, użyj document.activeElement.blur()

Jeśli potrzebujesz obsługi przeglądarki Firefox 2, możesz również użyć tego:

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

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

8
Jeśli Firefox 2, z 0,66% udziału w przeglądarce, przełamie umowę ... Mam poprawkę, która znajduje się w mojej edytowanej odpowiedzi.
jps

21
W 2013 roku udział przeglądarek Firefox 2 był znacznie mniejszy niż 0,66%, a najprostszy sposób document.activeElement.blur()jest najlepszym sposobem na osiągnięcie tego efektu.
chowey

88

.focus()a potem .blur()coś innego na twojej stronie. Ponieważ tylko jeden element może mieć fokus, jest on przenoszony do tego elementu, a następnie usuwany.


Czy istnieje sposób na stworzenie niewidzialnego elementu, który ma skupienie?
Andres

1
Nie jestem ekspertem w kwestii najlepszego sposobu na zrobienie tego; ale z pewnością możesz umieścić go poza ekranem lub poza granicami overflow: clipstylizowanego elementu. Ale możesz po prostu użyć pola, które już istnieje na stronie. Lub utwórz go tylko w tym celu i usuń go ponownie.
Kevin Reid

Myślę, że ustawienie fokusu na element poza ekranem wymusi przewinięcie do tego elementu. Możesz jednak w tym celu utworzyć niewidoczny element. Biorąc to pod uwagę, niektóre przeglądarki mogą mieć trudności z usunięciem znaku. Po prostu rozmycie () prawdopodobnie działałoby lepiej. Nadal można uzyskać klucze za pomocą programu obsługi zdarzeń keyup (keydown).
Alexis Wilke

5
Ta odpowiedź jest nieaktualna i nie ma zastosowania w roku 2017. Zamiast tego użyj activeElement, jak na stackoverflow.com/a/2520670/39808
Paul Fisher

Nadal działa, tylko dłużej i przenosi fokus (co może kolidować z nawigacją za pomocą TAB). Ponadto nie jest od razu jasne, co powinno być „czymś innym arbitralnym”.
user202729

49
document.activeElement.blur();

Działa nieprawidłowo w IE9 - rozmywa całe okno przeglądarki, jeśli aktywnym elementem jest treść dokumentu. Lepiej sprawdzić w tym przypadku:

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

To prawda, ale dziś prawie nikt nie używa już IE9.
Kaczor Donald

18

Żadna z udzielonych tutaj odpowiedzi nie jest całkowicie poprawna w przypadku korzystania z języka TypeScript, ponieważ możesz nie znać rodzaju wybranego elementu.

Byłoby to zatem preferowane:

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

Ponadto odradzam skorzystanie z rozwiązania podanego w zaakceptowanej odpowiedzi, ponieważ wynikające z tego rozmycie nie jest częścią oficjalnej specyfikacji i może się zepsuć w dowolnym momencie.


6
Fajnie jest widzieć, jak pytanie, które zadałem w 2010 roku, wciąż ma ewoluującą odpowiedź.
Andres

2

dummyElem.focus () gdzie dummyElem jest ukrytym obiektem (np. ma ujemny zIndex)?


0

Możesz wywołać window.focus ();

ale przesuwanie lub utrata fokusu z pewnością przeszkadza każdemu, kto używa klawisza Tab do poruszania się po stronie.

można było nasłuchiwać kodu 13 i zrezygnować z efektu naciśnięcia klawisza tabulatora.


-3

Dzięki jQuery po prostu: $(this).blur();


2
To stara odpowiedź, więc być może już wiesz, ale są dwa powody, dla których ta odpowiedź nie ma zastosowania. 1. Zakłada się, że PO korzystał z jquery, 2. thismusi być elementem ukierunkowanym, podczas gdy pytanie wyraźnie stwierdza, że ​​PO nie zna z wyprzedzeniem tego elementu.
Brandon,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.