Jak skoncentrować element formularza HTML w JavaScript

Skoncentruj się na elemencie odnosi się do sekcji aktualnie aktywnej strony. W niniejszym dokumencie jeden element HTML może być skupiony na raz, który może być oknem, pole tekstowym lub przyciskiem. W formach HTML pole wejściowe powinno być aktywnym elementem, ponieważ wiele elementów nie pozwala na skupienie się domyślnie. Aby skupić się na elementach, użyj htmlelementu.Focus () Metoda.

Ten post na blogu ilustruje proces skupienia się na elemencie formularza HTML w JavaScript.

Jak skoncentrować element formularza HTML w JavaScript?

Aby ustawić skupienie się na elemencie formularza HTML, można zastosować metodę JavaScript Focus (). Aby to zrobić, nazwij tę metodę, przekazując ją obiektem elementu, który należy skupić.

Składnia
Postępuj zgodnie z poniższą metodą, aby skupić się na elemencie formularza HTML:

Htmlelement.centrum()

Wypróbujmy kilka przykładów, aby zobaczyć, jak skoncentrować się na elemencie podczas ładowania strony lub na zawisie elementu.

Przykład 1: Ustaw skupienie elementu formularza HTML na ładowaniu strony
W danym przykładzie skoncentrujemy się na polu tekstu wejściowego na obciążeniu strony. Tak więc utwórz formularz z wejściowym polem tekstowym, które będzie aktywne, gdy strona będzie ładować:

Formularz HTML będzie wyglądał tak:

Jak widać, powyższe wyjście pokazuje pole wejściowe, które nie jest aktywne. Aby skupić się na tym polu tekstowym, użyj poniżej uzyskanego kodu JavaScript:

okno.onload = function ()
dokument.getElementById („tekst”).centrum();

W powyższych wierszach kodu:

• Zdefiniuj funkcję w „okno.Onload" wydarzenie.
• Zadzwoń do "centrum()„Metoda, pobierając element HTML”pole tekstowe”Korzystanie z przypisanego identyfikatora za pomocą„getElementById ()" metoda.

Odpowiednie wyjście będzie następujące:

Powyższy GIF wskazuje, że pole tekstowe jest aktywne na obciążeniu strony.

Następnie zobaczmy, jak skupić się na polu wejściowym podczas unoszenia się na elemencie.

Przykład 2: Ustaw skupienie elementu formularza HTML na unoszeniu elementu
Aby skupić się na polu tekstowym podczas unoszenia się na nim, użyj „onmouseover„Dyskusator wydarzenia:

Zdefiniuj funkcję o nazwie „elementfocus ()„To wywoła, gdy nastąpi zdarzenie Mouseover:

funkcja elementFocus ()
dokument.getElementById („tekst”).centrum();

Wyjście pokazuje, że pola tekstowe będzie aktywne, podczas gdy mysz się na nim unosi:

Podaliśmy podstawowe informacje związane z skupieniem elementu HTML w formularzu HTML za pomocą JavaScript.

Wniosek

Aby skoncentrować się na elemencie formularza HTML w JavaScript, użyj „Htmlelement.centrum()" metoda. Można go ustawić na elementach HTML, takich jak „pole tekstowe”,„przycisk" i tak dalej. Możesz skoncentrować się na elemencie podczas ładowania strony lub dowolnym innym zdarzeniu. Ten blog zilustrował proces ustawienia skupienia się na elemencie formularza HTML w JavaScript.