Jak sprawić, by znacznik wejściowy HTML akceptował tylko wartości liczbowe?

143

Muszę się upewnić, że określone <input>pole przyjmuje tylko liczby jako wartość. Dane wejściowe nie są częścią formularza. W związku z tym nie jest przesyłany, więc sprawdzanie poprawności podczas przesyłania nie jest opcją. Chcę, aby użytkownik nie mógł wpisywać żadnych znaków innych niż cyfry.

Czy jest na to zgrabny sposób?

html input numbers validating Chiel ten Brinke
źródło
stackoverflow.com/questions/469357/…
alexblum
2
Spójrz na ten [link] [1], który zawiera wystarczające informacje. [1]: stackoverflow.com/questions/469357/…
Maheshkumar
Ten też może się przydać: stackoverflow.com/questions/995183/…
Chiel ten Brinke
Możliwe duplikowanie tekstu HTML pozwala tylko na wprowadzanie numeryczne
emkey08

Odpowiedzi:

282

HTML 5

Możesz użyć liczby typu wejściowego HTML5, aby ograniczyć tylko wpisy liczbowe:

<input type="number" name="someid" />

Działa to tylko w przeglądarce skarg HTML5. Upewnij się, że typ dokumentu html to:

<!DOCTYPE html>

Zobacz też https://github.com/jonstipe/number-polyfill, aby uzyskać przejrzystą obsługę w starszych przeglądarkach.

JavaScript

Aktualizacja: jest nowe i bardzo proste rozwiązanie:

Pozwala na użycie dowolnego filtru wejściowego w tekście <input>, w tym różnych filtrów numerycznych. To poprawnie obsłuży Kopiuj + Wklej, Przeciągnij + Upuść, skróty klawiaturowe, operacje menu kontekstowego, klawisze bez wpisywania i wszystkie układy klawiatury.

Zobacz tę odpowiedź lub wypróbuj ją sam na JSFiddle .

W ogólnym celu możesz przeprowadzić walidację JS, jak poniżej:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

Jeśli chcesz zezwolić na ułamki dziesiętne, zamień warunek „jeśli” na:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Źródło: wprowadzanie tekstu HTML umożliwia tylko wprowadzanie numeryczne

Demo JSFiddle: http://jsfiddle.net/viralpatel/nSjy7/

Viral Patel
źródło
6
Tak, to działa dla mnie zarówno w przeglądarce Firefox, jak i Chrome. Dziwne, że js jest niezbędny do tak prostej rzeczy.
Chiel ten Brinke
7
Nie działa w chrome 30. Nie mam żadnych problemów z wpisywaniem liter do twojego wpisanego „numeru” na skrzypcach. Hmmm ...
Ben
2
Co jeśli ktoś zechce wprowadzić wartości zmiennoprzecinkowe, takie jak 8,9?
syed shah
6
aby uzyskać bardziej niezawodne rozwiązanie, rozważ także kopiowanie i wklejanie, które może dodawać litery do tego przykładu!
Neil,
3
Ups !! pierwsza linia musi zmienić się na:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F.
33

Możesz również użyć atrybutu pattern w html5:

<input type="text" name="name" pattern="[0-9]" title="Title" />

Samouczek dotyczący sprawdzania poprawności danych wejściowych

Chociaż, jeśli twój doctype nie jest html, myślę, że będziesz musiał użyć javascript / jquery.

martincarlin87
źródło
3
Chociaż firefox nadaje polu wprowadzania czerwoną ramkę, gdy wpisywane są inne niż cyfry, zarówno w przeglądarce Firefox, jak i Chrome, możesz wpisać znaki inne niż cyfry w polu wprowadzania.
Chiel ten Brinke
jakiego typu dokumentu używasz na swojej stronie?
martincarlin87,
ok, może nie jest obsługiwany w posiadanych wersjach przeglądarek? Nie jestem w 100% pewien, ale szczerze mówiąc,
użyłbym
7
właściwość umożliwia wprowadzanie liczb, ale nie pozwala na przesyłanie formularza.
Mój 1
1
WYŁĄCZ TYLKO WERYFIKACJĘ!
Eric Hodonsky
16

Szybki i łatwy kod

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

Pozwoli to na użycie tylko liczb i cofania.

Jeśli potrzebujesz również części dziesiętnej, użyj tego fragmentu kodu

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
abhijithvijayan
źródło
13

Wypróbuj ten kod wraz z samym polem wejściowym

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

będzie działać dobrze.

subindas pm
źródło
jak więc usunąć backspace?
6 do 3
7

Możesz użyć <input type="number" />. Pozwoli to tylko na wprowadzanie liczb do innego pola wprowadzania.

Przykład: http://jsfiddle.net/SPqY3/

Należy pamiętać, że type="number"znacznik wejściowy jest obsługiwany tylko w nowszych przeglądarkach.

W przypadku przeglądarki Firefox możesz sprawdzić poprawność danych wejściowych za pomocą javascript:

http://jsfiddle.net/VmtF5/

Aktualizacja 2018-03-12: Obsługa przeglądarek jest znacznie lepsza, teraz jest obsługiwana przez:

  • Chrome 6+
  • Firefox 29+
  • Opera 10.1+
  • Safari 5+
  • Krawędź
  • (Internet Explorer 10+)
starbeamrainbowlabs
źródło
1
Wygląda na to, że działa bardzo dobrze w Chrome, ale nie w Firefoxie.
Chiel ten Brinke
Ach. Dzieje się tak, ponieważ Firefox nie obsługuje input type = number. Alternatywnie możesz użyć javascript do sprawdzenia poprawności danych wejściowych, gdy użytkownik wprowadza tekst. Zaktualizowano odpowiedź.
starbeamrainbowlabs
Skrypt jsfiddle.net/VmtF5 również nie będzie działał. Nawet jeśli 1 cyfra jest na początku znaku, walidacja nie powiedzie się. Spróbuj sam na jsfiddle
Akshay,
@aarn To działa dla mnie (patrz i.imgur.com/AWdmEov.png ), jakiej przeglądarki używasz?
starbeamrainbowlabs
@starbeamrainbowlabs Używam Firefoksa. Ponadto wprowadź 6abc, nie pokaże Ci błędu
Akshay
5 
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

aw js:

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

lub możesz napisać to w skomplikowany, ale użyteczny sposób:

<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />

Uwaga : między przeglądarkami i wyrażenie regularne dosłownie.

Fredrick Gauss
źródło
jak dodałbyś możliwość wprowadzania danych wejściowych, takich jak .5 lub .3?
user3591637
Następnie należy wziąć pod uwagę pierwszy i drugi znak ( 0.43lub .43), które można by zrobić sprawdzając wartość bieżącego wejścia plus wciśnięty klawisz. Byłoby to brzydkie w jednowierszowym kodzie, polecam do tego użyć funkcji. Aby przetestować liczbę całkowitą lub zmiennoprzecinkową, sprawdź tutaj .
Fredrick Gauss
1
nie możesz usunąć numeru wpisanego przez pomyłkę
Chris Sim
5

Użyłem wyrażenia regularnego, aby zastąpić wartość wejściową wymaganym wzorcem.

var userName = document.querySelector('#numberField');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {  
  var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
  this.value = newValue;
}
  
<input type="text" id="numberField">
Rozwiń fragment

Shaktish
źródło
1
Dlatego uwielbiam regex. Dzięki, stary, naprawdę uratowałeś mi dzień
Nirmal,
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup wyzwala się po zwolnieniu klawisza.

isNaN(parseFloat(value))? sprawdza, czy wartość wejściowa nie jest liczbą.

Jeśli nie jest to liczba, wartość jest ustawiana na 1000 :Jeśli jest to liczba, wartość jest ustawiana na wartość.

Uwaga: z jakiegoś powodu działa tylko ztype="number"

Aby uczynić go jeszcze bardziej ekscytującym, możesz również wyznaczyć granicę:

<input 
    onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
       type="number"
      value="1000"
>

Cieszyć się!

user40521
źródło
4

Trochę z tym walczyłem. Wiele rozwiązań tutaj i gdzie indziej wydawało się skomplikowanych. To rozwiązanie wykorzystuje jQuery / javascript obok HTML.

    <input type="number" min="1" class="validateNumber">

    $(document).on('change', '.validateNumber', function() { 
        var abc = parseInt($(this).val());
        if(isNaN(abc)) { abc = 1; }
        $(this).val(abc);
    });

W moim przypadku śledziłem małe ilości z minimalną wartością 1, stąd min = "1" w tagu wejściowym i abc = 1 w sprawdzaniu isNaN (). W przypadku liczb tylko dodatnich można zmienić te wartości na 0, a nawet po prostu usunąć min = "1" ze znacznika wejściowego, aby uwzględnić liczby ujemne.

Działa to również dla wielu pudełek (i może zaoszczędzić trochę czasu wczytywania w porównaniu z wykonywaniem ich indywidualnie według id), po prostu dodaj klasę „validateNumber” tam, gdzie jest to potrzebne.

Wyjaśnienie

parseInt () w zasadzie robi to, czego potrzebujesz, z wyjątkiem tego, że zwraca NaN, a nie jakąś wartość całkowitą. Za pomocą prostego if () możesz ustawić "rezerwową" wartość, którą preferujesz we wszystkich przypadkach, gdy zwracany jest NaN :-). Również W3 stwierdza tutaj, że globalna wersja NaN będzie typem rzutowania przed sprawdzeniem, co daje dodatkowe sprawdzanie (Number.isNaN () tego nie robi). Wszelkie wartości wysyłane do serwera / zaplecza nadal powinny być tam sprawdzane!

Izajasz
źródło
4 

function AllowOnlyNumbers(e) {

e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);

return (/^\d+$/.test(str));
}
<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />
Rozwiń fragment

JSFiddle: https://jsfiddle.net/ug8pvysc/

Sameh Saeed
źródło
1
Kiedy wklejasz wartość zawierającą tekst, pozwala na to
Chris Sim
1
Pozwala również na znaki specjalne. Na przykład: á, ã, ê, ó, è itd.
PrawiePitt
3

jeśli potrafisz używać HTML5, możesz to zrobić. <input type="number" /> Jeśli nie, będziesz musiał to zrobić za pomocą javascript, jak powiedziałeś, że nie zostanie przesłany, aby zrobić to z codebehind.

<input id="numbersOnly" onkeypress='validate()' />

function validate(){
  var returnString;
  var text = document.getElementByID('numbersOnly').value;
  var regex = /[0-9]|\./;
  var anArray = text.split('');
  for(var i=0; i<anArray.length; i++){
   if(!regex.test(anArray[i]))
   {
     anArray[i] = '';
   }
  }
  for(var i=0; i<anArray.length; i++) {
    returnString += anArray[i];
  }
  document.getElementByID('numbersOnly').value = returnString;
}

PS nie przetestował kodu, ale powinien być mniej więcej poprawny, jeśli nie sprawdź literówek: D Możesz dodać kilka więcej rzeczy, na przykład co zrobić, jeśli ciąg jest pusty, itp. Możesz też to przyspieszyć: D

czioutas
źródło
2

jeśli nie jest liczbą całkowitą, ustaw 0

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
websky
źródło
2

Przyjęta odpowiedź:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

Jest dobry, ale nie doskonały. U mnie to działa, ale otrzymuję ostrzeżenie, że instrukcję if można uprościć.

Wtedy wygląda to tak, co jest o wiele ładniejsze:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

Chciałbym skomentować oryginalny post, ale moja reputacja jest zbyt niska, aby to zrobić (właśnie utworzyłem to konto).

Chris H.
źródło
2

Możesz użyć <input>tagu z atrybutem type = 'number'.

Na przykład możesz użyć <input type='number' />

To pole wejściowe dopuszcza tylko wartości liczbowe. Możesz również określić minimalną i maksymalną wartość, która powinna być akceptowana przez to pole.

Geeth Chadalawada
źródło
2

Proszę zobaczyć mój projekt filtra między przeglądarkami wartości elementu wprowadzania tekstu na Twojej stronie internetowej przy użyciu języka JavaScript: Filtr klucza wejściowego . Możesz odfiltrować wartość jako liczbę całkowitą, liczbę zmiennoprzecinkową lub napisać niestandardowy filtr, taki jak filtr numeru telefonu. Zobacz przykład kodu wprowadzania liczby całkowitej:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov [email protected]">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Integer field</h1>
<input id="Integer">
<script>
	CreateIntFilter("Integer", function(event){//onChange event
			inputKeyFilter.RemoveMyTooltip();
			var elementNewInteger = document.getElementById("NewInteger");
			var integer = parseInt(this.value);
			if(inputKeyFilter.isNaN(integer, this)){
				elementNewInteger.innerHTML = "";
				return;
			}
			//elementNewInteger.innerText = integer;//Uncompatible with FireFox
			elementNewInteger.innerHTML = integer;
		}
		
		//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
		, function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
	);
</script>
 New integer: <span id="NewInteger"></span>
</body>
</html>
Rozwiń fragment

Zobacz także moją stronę „Pole całkowite:” przykładu filtru klucza wejściowego

Andrej
źródło
2

W ogólnym celu możesz przeprowadzić walidację JS, jak poniżej:

Będzie działać na klawiaturze numerycznej i zwykłych klawiszach numerycznych 

function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
        return true;
    return false;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
YasirPoongadan
źródło
2

Dodaj wewnątrz tagu wejściowego: onkeyup = "wartość = wartość.replace (/ [^ \ d] / g, '')"

Naveen Kumar
źródło
2
Witamy w SO! Niestety jest to pytanie sprzed 5 i pół roku, na które już została zaakceptowana odpowiedź. Możesz chcieć przejrzeć pytania bez odpowiedzi tutaj: stackoverflow.com/unansrated
AndroidNoobie
2

Zaktualizowałem niektóre opublikowane odpowiedzi, dodając następujące:

  • Dodaj metodę jako metodę rozszerzenia
  • Pozwól na wprowadzenie tylko jednego punktu

  • Określ, ile liczb po przecinku jest dozwolonych.

    String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
        return false;

    //Prevent more than one point
    if (charCode == 46 && this.includes("."))
        return false;

    // Restrict the needed decimal digits
    if (this.includes("."))
    {
        var number = [];
        number = this.split(".");
        if (number[1].length == decimalPts)
             return false;
     }

     return true;
};
Plexis Plexis
źródło
1

Używam tego do kodów pocztowych, szybko i łatwo.

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
Justin Buser
źródło
1

Używając tego kodu, nie możesz używać przycisku „BackSpace” w przeglądarce Mozilla Firefox, możesz używać klawisza Backspace tylko w przeglądarce Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "wymagane>

Wendell Alvarez
źródło
0

Lepiej jest dodać „+” do warunku REGEX, aby akceptować wiele cyfr (nie tylko jedną):

<input type="text" name="your_field" pattern="[0-9]+">

Dashko Leonid
źródło
0

Jednym ze sposobów mogłoby być utworzenie tablicy dozwolonych kodów znaków, a następnie użycie Array.includesfunkcji w celu sprawdzenia, czy wprowadzony znak jest dozwolony.

Przykład:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>
MA1
źródło
0

Wystarczająco proste?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});
<input id="inputField" type="text">
Rozwiń fragment

Normajean
źródło