Liczby wejściowe tylko w JavaScript

Często istnieją pewne witryny oparte na wymogach, które chcą, aby użytkownik spełnił określone kryteria, aby uzyskać dostęp do strony internetowej. Na przykład w przypadku ograniczenia użytkownika do wprowadzenia określonego typu danych podczas wypełniania określonego formularza. W takich przypadkach wprowadzanie tylko liczb w JavaScript staje się bardzo pomocne w spełnieniu wymagań i zapewnianiu dokładności danych.

Ten artykuł pokaże metody wprowadzania tylko liczb w JavaScript.

Jak wprowadzić tylko liczby w JavaScript?

Możesz wprowadzić tylko liczby w JavaScript, wybierając następujące podejścia:

• "ASCII" Zestaw znaków
• "JQuery"

Wspomniane koncepcje zostaną zademonstrowane jeden po drugim!

Metoda 1: Liczby wejściowe w JavaScript za pomocą zestawu znaków ASCII

Tę procedurę można zastosować do zastosowania warunku na reprezentację liczb ASCII w polu wejściowym.

Przykład
W poniższym przykładzie dołącz „ID„To należy wprowadzić w polu wejściowym. Podaj także pole wejściowe jako „tekst”I wywołaj funkcję InputNumber (), przekazując zdarzenie jako argument, gdy„Onkeypress„Wydarzenie uruchamia się:

ID:

Następnie zdefiniuj funkcję o nazwie „InputNumber ()”To akceptuje„num„Jako argument. W definicji funkcji zastosuj warunek na liczby reprezentowane w ASCII w taki sposób, że jeśli kod ASCII jest większy niż „31”I mniej niż„48" Lub "57”, Oznacza to, że w polu wejściowym wprowadza się znak nie. W takim przypadku zostaną wygenerowane ostrzeżenie z prośbą o wprowadzanie tylko liczb:

funkcja InputNumber (num)
var asciicode = (num.Który) ? num.który: num.Kod Klucza
if (asciicode> 31 && (asciicode 57))
Alert („Wprowadź tylko liczby”)

Można zauważyć, że gdy postać jest wpisana w polu wejściowym, pole alerty pojawiły się z następującymi informacjami:

Poniższa tabela wyjaśnia omówioną koncepcję reprezentacji ASCII dla liczb zgodnie z wymogiem:

Reprezentacja ASCII	Cyfry
48	0
49	1
50	2
51	3
52	4
53	5
54	6
55	7
56	8
57	9

Jedynym ograniczeniem powyższej metody jest to, że nadal przyjmuje ona dane wejściowe nie-liczbowe od użytkownika po wyświetleniu ostrzeżenia. Aby rozwiązać ten problem, sprawdź następną metodę!

Metoda 2: Liczby wejściowe w JavaScript za pomocą JQuery

Takie podejście można wdrożyć poprzez włączenie biblioteki „JQuery” i zastosowanie jej do pola wejściowego za pomocą wyrażenia regularnego w celu wykrycia wartości nie-numerycznych i zastąpienia ich pustym ciągiem.

Spójrz na poniższy przykład, aby zrozumieć określoną koncepcję.

Przykład
Po pierwsze, dołącz następującą bibliotekę jQuery, aby zastosować jej funkcje:

Następnie dodaj nagłówek za pomocą „

”Tag i pole wejściowe za pomocą„”Tag w środku znacznika, aby wyrównać je w środku. Tutaj ograniczymy długość pola wejściowego do „4" używając "maksymalna długość”Atrybut, ponieważ jest to 4-cyfrowy pin:

Wprowadź 4-cyfrowy PIN:

Teraz zastosuj „JQuery”Funkcja w polu wejściowym z„/[^0-9]/g" Wyrażenie regularne. To wyrażenie regularne sprawdzają, czy wartość typów nie ma postaci „^”, a następnie zastąp go pustym znakiem:

$ (funkcja ()
$ ("wejście [name = 'numonly']").on („wejście”, funkcja (e)
$ (to).val ($ (this).val ().zamień (/[^0-9]/g, "));
);
);

W tym przykładzie ograniczyliśmy pole wejściowe, aby akceptować tylko 4 cyfrowe znak numeryczny od użytkownika:

Zaimplementowaliśmy metody w polu wejściowym do wprowadzania tylko liczb w JavaScript.

Wniosek

Aby wprowadzić tylko liczby w JavaScript, zaimplementowaliśmy „ASCII”Podejście do ustawiania postaci i„JQuery”Technika. Podejście do zestawu znaków ASCII można zastosować do zastosowania warunku do pola wejściowego, które sprawdza znak ASCII wprowadzonego znaku. Natomiast technika JQuery jest używana wraz z wyrażeniem regularnym, aby zastosować sprawdzenie na utworzonym polu wejściowym. W tym artykule pokazano metody wprowadzania tylko liczb w JavaScript.