Włącz/wyłącz pola wejściowe za pomocą JavaScript

Podczas tworzenia formularza lub kwestionariusza istnieje wymóg, aby wyświetlić wniosek użytkownika w określonym momencie podczas wypełniania pola wejściowego. Na przykład ograniczenie liczby znaków w polu i.mi. "Kontakt nr". Oprócz tego, w celu zastosowania warunku wstępnego do wypełnienia określonego pola itp. W takim przypadku scenariusze włączenie/wyłączanie pól wejściowych w JavaScript jest bardzo wygodnym podejściem zarówno dla programistów, jak i.

Ten samouczek wyjaśni podejścia, aby włączyć/wyłączyć pól wejściowych za pomocą JavaScript.

Jak włączyć/wyłączyć pola wejściowe za pomocą JavaScript?

Aby włączyć/wyłączyć pola wejściowe za pomocą JavaScript, następujące podejścia można wykorzystać w połączeniu z „wyłączony" nieruchomość:

• "na kliknięcie" wydarzenie.
• "addEventListener ()" metoda.

Podejście 1: Włącz/wyłącz pola wejściowe za pomocą JavaScript za pomocą zdarzenia onClick

Jakiś "na kliknięcie”Zdarzenie służy do przekierowania do określonej funkcji. To zdarzenie można zastosować w celu wywołania odpowiedniej funkcji w celu włączenia i wyłączania pól wejściowych po kliknięciu przycisku.

Przykład

Rzućmy okiem na podszedł poniżej przykład:

Włącz/wyłącz pole tekstowe

W wyżej wymieniony kod wykonaj następujące kroki:

• Dołącz dane wejściowe „tekst„Pole o określonym„ID" I "symbol zastępczy”Wartości.
• Utwórz także dwa oddzielne przyciski z załączonym „na kliknięcie”Zdarzenia przekierowujące do dwóch różnych funkcji odpowiednio włączania i wyłączania pól wejściowych.

Kontynuujmy do części kodu JavaScript:

W powyższym fragmencie kodu wykonaj następujące kroki:

• Deklaruj funkcję o nazwie „disablefield ()".
• W swojej definicji uzyskaj dostęp do utworzonego pola wejściowego według „ID" używając "dokument.getElementById ()" metoda
• W następnym kroku zastosuj „wyłączony”Właściwość i przypisz wartość logiczną”PRAWDA". Spowoduje to wyłączenie pola wejściowego po kliknięciu przycisku.
• Podobnie zdefiniuj funkcję o nazwie „enablefield ()".
• Podobnie w swojej definicji powtórz krok omówiony w celu uzyskania dostępu do pola wejściowego.
• Tutaj przypisz „„wyłączony„Nieruchomość jako„FAŁSZ". Spowoduje to włączenie pola wejściowego wyłączonego.

Wyjście

W powyższym wyjściu można zaobserwować, że pole wejściowe jest wyłączone i włączone poprawnie przy odpowiednim kliknięciu przycisku.

Podejście 2: Włącz/wyłącz pola wejściowe za pomocą JavaScript za pomocą metody addEventListener ()

„„addEventListener ()”Metoda służy do dołączenia zdarzenia do elementu. Metodę tę można wdrożyć, aby wyłączyć i włączyć pole wejściowe na podstawie załączonego zdarzenia i określonego „klucz".

Składnia

W powyższej składni:

• "wydarzenie”Odnosi się do nazwy wydarzenia.
• "funkcjonować”Wskazuje na funkcję do wykonania.
• "używać”To opcjonalny parametr.

Przykład

Obserwujmy poniżej wyświetlony przykład:

Włącz/wyłącz pole tekstowe

W powyższych wierszach kodu:

• Obejmują podany nagłówek.
• W następnym kroku powtórz metodę omówioną w poprzednim podejściu do włączenia pola wejściowego o określonym „ID" I "symbol zastępczy”Wartości.

Przejdźmy do części kodu JavaScript:

W powyższym fragmencie kodu wykonaj następujące kroki:

• Uzyskaj dostęp do pola wejściowego przez to „ID" używając "dokument.getElementById ()" metoda.
• W następnym kroku zastosuj „addEventListener ()”Metoda i załącz wydarzenie o nazwie„Keydown".
• W dalszym kodeksie przypisz „wyłączony„Nieruchomość jako„FAŁSZ”W celu włączenia pola wejściowego.
• Wreszcie w „w przeciwnym razie”Warunek, przeznacz„wyłączony„Nieruchomość jako„PRAWDA”W celu wyłączenia pola włączonego wejścia po naciśnięciu„Wchodzić" klucz.

Wyjście

Z powyższego wyjścia widać, że pole wejściowe zostaje wyłączone po naciśnięciu „Wchodzić" klucz.

Wniosek

„„wyłączony„Nieruchomość w połączeniu z„na kliknięcie”Wydarzenie lub„addEventListener ()”Metodę można zastosować, aby włączyć/wyłączyć pola wejściowe za pomocą JavaScript. Poprzednie podejście można wykorzystać do przekierowania do odpowiedniej funkcji, aby włączyć/wyłączyć pole wejściowe po kliknięciu przycisku. To ostatnie podejście można wdrożyć w celu wykonania wymaganej funkcjonalności na podstawie załączonego zdarzenia i określonego „klucz". W tym artykule wyjaśniono, jak włączyć/wyłączyć pola wejściowe w JavaScript.