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?

— 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

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

A co powiesz na używanie <input type="number"...>?

http://www.w3schools.com/tags/tag_input.asp

Tutaj jest również pytanie, które zawiera kilka przykładów użycia JavaScript do walidacji .

Aktualizacja: powiązane z lepszym pytaniem (dzięki alexblum).

— dan1111
ź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 anhr@mail.ru">
	<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

1

http://www.texotela.co.uk/code/jquery/numeric/ numeryczne napisy dla Leo Vũ za wspomnienie o tym i oczywiście TexoTela. ze stroną testową.

— Clark Superman
ź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