Jak wymusić pole wejściowe do wprowadzania liczb tylko za pomocą JavaScript?

Ograniczenie użytkownika tylko do liczbowych wartości wejściowych jest niezwykle ważne, szczególnie przy przyjmowaniu danych na formularzu. Istnieje wiele przykładów, w których ograniczenie użytkownika w celu uniknięcia błędnego wkładu jest ważne, takie jak przyjmowanie numeru telefonu użytkownika lub pytając użytkownika o jego wiek.

W HTML znacznik wejściowy można ustawić tak, aby przyjmować tylko wejścia numeryczne, ustawiając jego typ własność do numer lub teren. Jednak robienie tego przez JavaScript będzie trochę trudne.

Krok 1: Dokument HTML

Utwórz plik HTML i w tym pliku skonfiguruj pole wejściowe i trochę tekstu informujące użytkownika do wprowadzania danych do pola tekstowego za pomocą następujących wierszy:

Wprowadź numery tutaj

W tych liniach:

• Właściwość OnKeypress Tagu wejściowego została ustawiona na wartość zwrotu Sprawdź numer() metoda
• Właściwość OnKeypress jest wykonywana na konkretnym wydarzeniu, a to wydarzenie jest naciśnięciem klawisza, więc przejdź przez wydarzenie wewnątrz Sprawdź numer() Metoda również.

Uruchamianie strony internetowej HTML będzie teraz zawierać następujący wynik w przeglądarce:

Obecnie wszystkie typy znaków można zapisać w tym polu tekstowym:

Ale to zmieni w następnej sekcji.

Krok 2: Skonfiguruj kod JavaScript

W pliku JavaScript lub w tag, zacznij od utworzenia funkcji wymienionej jako Sprawdź numer():

funkcja kontrolna (zdarzenie)
// nadchodzące linie wchodzą tutaj do środka

W tej funkcji pierwszą rzeczą jest uzyskanie kodu ASCII naciśnięcia klawisza za pomocą „wydarzenie" zmienny:

var acode = zdarzenie.Który ? wydarzenie.które wydarzenie.Kod Klucza;

Następnie, jeśli kod ASCII nie ma liczby, zwróć FAŁSZ W przeciwnym razie do pola wejściowego zwróć true:

if (Acode> 31 && (Acode < 48 || aCode > 57)) zwróć false;
zwrócić true;

Kompletny fragment kodu będzie jako:

funkcja kontrolna (zdarzenie)
var acode = zdarzenie.Który ? wydarzenie.które wydarzenie.Kod Klucza;
if (Acode> 31 && (Acode < 48 || aCode > 57)) zwróć false;
zwrócić true;

Z tym skończyłeś konfiguracją części JavaScript.

Krok 3: Testowanie pola wejściowego

Po zakończeniu kroków 1 i kroku 2 po prostu wykonaj dokument HTML i spróbuj umieścić wartości w polu wejściowym i obserwuj jego zachowanie:

Teraz pozwala tylko na napisanie liczb i ignoruje inny charakter

Wniosek

Aby ograniczyć użytkownika do wprowadzania znaków numerycznych wewnątrz wejścia za pomocą JavaScript. Następnie, w takim przypadku, wywołać funkcję na każdym klawiszu naciśniętym w tym polu wejściowym i w tej funkcji, porównaj kod ASCII klawisza naciśniętego na kodach ASCII o wartościach liczbowych. Na podstawie tego porównania pozwól klawiszom wprowadzać do pola wejściowego.