`HTMLElement.focus / blur` în JavaScript

Formulare, media și canvas Toate browserele

Mută focusul tastaturii pe un element (focus) sau îl scoate de pe el (blur).

Sintaxă

element.focus({ preventScroll: true })
element.blur()
document.hasFocus()

Ce face `HTMLElement.focus / blur`

focus() face elementul activ pentru tastatură: un câmp primește cursorul, un buton poate fi apăsat cu Enter. Merge pe câmpuri, butoane, linkuri și orice element cu atributul tabindex. Elementul activ este în document.activeElement.

blur() scoate focusul de pe element. document.hasFocus() spune dacă fereastra sau fila este cea activă. Opțiunea preventScroll: true oprește derularea automată spre element.

Parametri

Parametru	Descriere
`optiuni`	Opțional, la focus: `{ preventScroll: true }`.

Ce returnează

focus și blur: undefined. hasFocus: true/false.

Exemple

Exemplul 1: Primul câmp al unei ferestre de dialog

const dialog = document.querySelector("#autentificare");
dialog.showModal();
dialog.querySelector("input[name=email]").focus();

console.log(document.activeElement.name, document.hasFocus());

Rezultat în browser

email true

Greșeli frecvente

Apelezi focus() pe un div obișnuit și nu se întâmplă nimic. Adaugă tabindex="-1" ca elementul să poată primi focus.

Comenzi înrudite

dialog.showModal / show / close: Deschide o fereastră de dialog (modală sau nu) construită cu elementul HTML <dialog> și o închide.
input.select / setSelectionRange / showPicker: Selectează textul dintr-un câmp (tot sau o parte) și deschide din cod selectorul de dată, culoare sau fișier.
addEventListener: Rulează o funcție când se întâmplă ceva pe pagină: un clic, o tastă, trimiterea unui formular.

Ce face HTMLElement.focus / blur