Jak wyczyścić pola wejściowe w JavaScript

Może istnieć sytuacja, w której konieczne jest wyczyszczenie wprowadzonej wartości pola wejściowego lub całej formy. Na przykład musisz zmienić kategorię lub napotkać określony wymóg zmiany wszystkich wprowadzonych danych. W takich przypadkach wyczyszczenie pól wejściowych za pomocą JavaScript staje się bardzo skuteczne i przydatne.

W tym artykule omówiono metody wyczyszczenia pól wejściowych w JavaScript.

Jak wyczyścić pola wejściowe w JavaScript?

Aby wyczyścić pola wejściowe w JavaScript, można zastosować następujące podejścia:

• Wydarzenie „Onfocus” i właściwość „Target”
• Wydarzenie „OnClick” i „Dokument.metoda getElementById () ”
• Metoda „RESET ()”

Przejrzyj omawiane metody jeden po drugim!

Metoda 1: Wyczyść pola wejściowe w JavaScript przy użyciu zdarzenia OnFocus i właściwości docelowej

„„onfocus„Wydarzenie jest uruchamiane, gdy określony element się skupia, i„cel„Właściwość zwraca element, który wywołał zdarzenie. Mówiąc dokładniej, techniki te można zastosować w celu wyczyszczenia określonej wartości docelowej w polu wejściowym.

Poniższy przykład jasno wyjaśnia omawianą koncepcję.

Przykład

W poniższym przykładzie przypisamy typ wejściowy jako „tekst”Z określoną wartością i dołącz jako zdarzenie onfocus do niej, które uruchomi funkcję ClearInput ():

Teraz zdefiniuj funkcję o nazwie „clearInput ()”Z„cel„Własność jako argument w celu zwrócenia elementu, który wywołał zdarzenie. Następnie zastosowano określony warunek, że jeśli pole wejściowe utrzyma określoną wartość, na przykład „Wyczyść wejście”, Pole wejściowe zostanie wyczyszczone:

funkcja ClearInput (Target)
if (cel.wartość == „wyczyść wejście”)
cel.wartość = "";

Teraz, gdy użytkownik wprowadzi „Wyczyść wejście„Wartość w polu wejściowym i zyskuje ostrość, wprowadzona wartość będzie jasna:

Metoda 2: Wyczyść pola wejściowe w JavaScript za pomocą zdarzenia i dokumentu OnClick.metoda getelementById ()

W JavaScript „The„dokument.getElementById ()„Metoda jest wykorzystywana do dostępu do elementu opartego na jego identyfikatorze i”na kliknięcie”Służy do przymocowania zdarzenia do elementu HTML. Mówiąc dokładniej, tę kombinację można użyć w taki sposób, że po kliknięciu dodanego przycisku, dostęp do elementu pola wejściowego, a wprowadzona wartość zostanie wyczyszczona.

Przykład

Najpierw przypisz typ wejściowy z identyfikatorem o nazwie „nazwa”:

Następnie utwórz przycisk z wartością o nazwie „jasne”I dodaj„na kliknięcie„Zdarzenie, które dostęp do funkcji ClearInput () po uruchomieniu:

Teraz zdefiniuj funkcję o nazwie „clearInput ()". Tutaj dokument.getElementById () będzie dostępny do pola wejściowego za pomocą jego identyfikatora. Następnie „Jeśli„Warunek zostanie zastosowany, aby dopóki pole wejściowe nie było puste, wartość pola wejściowego zostanie ustawiona jako pusta:

funkcja clearInput ()
var getValue = Dokument.getElementById („Nazwa”);
if (getValue.wartość != "")
getValue.wartość = "";

W tym scenariuszu kliknięcie dodanego przycisku wyczyści wartość pola wejściowego:

Chcesz zresetować wszystkie wartości pola wejściowego jednocześnie? Sprawdź następną metodę.

Metoda 3: Wyczyść pola wejściowe w JavaScript za pomocą metody RESET ()

„„Resetowanie()”Metoda usuwa wszystkie wartości elementów formy. Tę metodę można zaimplementować, aby wyczyścić tekst przyciskowy pola wejściowego za pomocą przycisku.

Składnia

FormObject.Resetowanie()

Tutaj, "FormObject”To element, który zostanie zresetowany.

Spójrz na podany przykład.

Przykład

Najpierw utwórz formularz i przypisz go identyfikator, jak pokazano poniżej. Następnie poproś użytkownika o wprowadzenie „ID”W polu wejściowym. Następnie dołącz przycisk z „na kliknięcie„Wydarzenie uzyskiwania dostępu do funkcji omówionej w poprzedniej metodzie:

ID:

Wreszcie zadeklaruj funkcję o nazwie „clearInput ()”, Przyprzyj formularz za pomocą dokumentu.GetElementById () Metoda i zresetuj pole wejściowe na przycisku Kliknij:

funkcja clearInput ()
dokument.getElementById („Form”).Resetowanie();

Wyjście

Wykazaliśmy techniki usuwania pól wejściowych w JavaScript.

Wniosek

Aby wyczyścić pola wejściowe w JavaScript, użyj „onfocus”Wydarzenie i„cel„Własność w celu zastosowania funkcjonalności w oparciu o obecność określonej wartości lub„ ”na kliknięcie()”Wydarzenie i„dokument.getElementById ()”Metoda uzyskania identyfikatora pola wejściowego i wyczyszczenia pola, o ile jest w nim pewna wartość lub„Resetowanie()„Metoda zresetowania wartości wszystkich pola wejściowego jednocześnie. Ten zapis wyjaśnił metody wyczyszczenia określonych pól wejściowych w JavaScript.