JavaScript | Centrum

W JavaScript metoda focus () służy do skupienia się na dowolnym elemencie strony internetowej HTML, co oznacza, że ​​ustawia ten element jako element aktywny. Kluczową kwestią jest to, że koncentruje się tylko na elementach, które „Móc„Bądź skoncentrowany na. Krótko mówiąc, nie wszystkie elementy mogą się skupić.

Aby lepiej zrozumieć centrum() Metoda, spójrz na jej składnię poniżej:

element.Focus (opcje);

W tej składni:

• element: Jest to odniesienie elementu HTML wewnątrz JavaScript.
• opcje: To nie jest wymagany parametr.

Przykład 1: Koncentracja na polu tekstowym za pomocą metody focus ()

Zacznij od utworzenia nowego dokumentu HTML i w tym dokumencie utwórz pole wejściowe i przycisk z następującymi wierszami:

Skoncentruj się na polu tekstowym

W powyższych liniach:

• Tag wejściowy otrzymał identyfikator „TF1"
• Przycisk ma identyfikator jako „BTN1”I zestaw atrybutów OnClick równy„ ButtonClicked () ”

Uruchamianie tego dokumentu HTML wyświetla następujące w przeglądarce:

Pole tekstowe i przycisk są wyświetlane na stronie internetowej. Teraz, aby dodać funkcjonalność po przycisku, dodaj następujące wiersze w pliku JavaScript:

funkcja ButtonClicked ()
tf = dokument.getElementById („tf1”);
tf.centrum();

W powyższych liniach JavaScript:

• Najpierw utwórz funkcję nazwaną jako ButtonClicked ()
• W tej funkcji uzyskaj odniesienie do pola tekstowego za pomocą jego identyfikatora i przechowywania tego odniesienia w „tf" zmienny
• Następnie po prostu zadzwoń centrum() metoda z „tf„Zmienna za pomocą operatora kropki

W tym momencie strona internetowa daje następujący wynik:

W wyjściu można zaobserwować, że naciśnięcie pola stawia pole tekstu jako aktywne lub „w centrum uwagi".

Przykład 2: Koncentrując się na elemencie z argumentami „opcji”

W tym przykładzie głównym celem jest posiadanie elementu w przewijanej pozycji. Następnie przycisk powinien nie tylko skupić się na tym elemencie, ale także wyświetlić ten element z dokumentu.

Zacznij od utworzenia dokumentu HTML i podobnie jak w pierwszym przykładzie, utwórz pole tekstowe i przycisk z następującymi wierszami:

type = "tekst"
id = "tf1"
class = "przewijane"
zastępca = "Jestem pola tekstowym"
/>

Skoncentruj się na polu tekstowym

W tych liniach jedyną różnicą jest:

• Wejście, które ma teraz klasę „Przewiń”, Który zostanie użyty do umieszczenia tego znacznika wejściowego w przewijanej pozycji w dokumencie

Następnie dodaj następujące wiersze do pliku CSS lub w etykietka:

ciało
Wysokość: 7000px;

.Przewidziane
Pozycja: absolutna;
Top: 4000px;

W wyżej wymienionych wierszach:

• Dokument był wysokością 7000px, dzięki czemu dokument stał się przewijany
• Następnie ustawiamy element z Przewiń klasa do absolutnej pozycji 4000px od góry

Uruchomienie tego dokumentu HTML podaj następującą stronę internetową w przeglądarce:

Ze wyjścia jasno wynika, że ​​pole tekstowe jest teraz umieszczone w pozycji 4000px z góry.

Następnie dodamy następujące wiersze JavaScript:

funkcja ButtonClicked ()
tf = dokument.getElementById („tf1”);
tf.focus (zapobieganiecroll: false);

W tych liniach:

• Funkcja ButtonClicked () jest zrobione
• W tej funkcji odniesienie do pola tekstowego odbywa się za pomocą jego identyfikatora i przechowywanego wewnątrz zmiennej ”tf".
• Następnie zastosuj centrum() Metoda na polu tekstowym i w jego argumentacji Zapobieganiecroll: false. Spowoduje to skupienie elementu i przewija dokument, aby wprowadzić ten element na widok.

Uruchom dokument HTML, a po kliknięciu przycisku otrzymasz następujący wynik:

Na mocy wyjścia można zaobserwować, że po kliknięciu przycisku, pole tekstowe jest wprowadzane do widoku przeglądarki, przewijając dokument. Co więcej, pole tekstowe jest teraz skupione.

Wniosek

Ten artykuł rzuca światło na cel i działanie centrum() Metoda w JavaScript. Ta metoda służy do skupienia elementu dokumentu HTML lub w znacznie prostszych słowach, ustawia ich aktywną właściwość jako prawdziwą. Aby zastosować tę metodę, po prostu użyj jej z odniesieniem elementu HTML z operatorem kropkowym. Ta metoda skupienia może również przyjmować opcjonalny argument, który został pokazany powyżej.