Wie kann man dafür sorgen, dass HTML-Eingabe-Tags nur numerische Werte akzeptieren?

143

Ich muss sicherstellen, dass ein bestimmtes <input>Feld nur Zahlen als Wert akzeptiert. Die Eingabe ist nicht Teil eines Formulars. Daher wird es nicht übermittelt, sodass eine Validierung während der Übermittlung keine Option ist. Ich möchte, dass der Benutzer keine anderen Zeichen als Zahlen eingeben kann.

Gibt es einen guten Weg, dies zu erreichen?

html  input  numbers  validating 
— Chiel ten Brinke
quelle
— alexblum
2
Schauen Sie sich diesen [Link] [1] an, der genügend Informationen enthält. [1]: stackoverflow.com/questions/469357/…
— Maheshkumar
Dieser kann auch nützlich sein: stackoverflow.com/questions/995183/…
— Chiel ten Brinke
— emkey08

Antworten:

282

HTML 5

Sie können die HTML5-Eingabetypnummer verwenden , um nur Zahleneinträge einzuschränken:

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

Dies funktioniert nur im HTML5-Beschwerdebrowser. Stellen Sie sicher, dass der Doctype Ihres HTML-Dokuments lautet:

<!DOCTYPE html>

Siehe auch https://github.com/jonstipe/number-polyfill für transparente Unterstützung in älteren Browsern.

JavaScript

Update: Hierfür gibt es eine neue und sehr einfache Lösung:

Sie können jede Art von Eingabefilter für einen Text verwenden <input>, einschließlich verschiedener numerischer Filter. Dadurch werden Kopieren + Einfügen, Ziehen + Ablegen, Tastaturkürzel, Kontextmenüoperationen, nicht typisierbare Tasten und alle Tastaturlayouts korrekt verarbeitet.

Sehen Sie sich diese Antwort an oder versuchen Sie es selbst auf JSFiddle .

Für allgemeine Zwecke können Sie die JS-Validierung wie folgt durchführen lassen:

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)"/>

Wenn Sie Dezimalstellen zulassen möchten, ersetzen Sie die "if-Bedingung" durch Folgendes:

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

Quelle: HTML-Texteingabe erlaubt nur numerische Eingabe

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

— Virales Patel
quelle
6
Ja, das funktioniert bei mir sowohl in Firefox als auch in Chrome. Seltsam, dass js für so eine einfache Sache notwendig ist.
— Chiel ten Brinke
7
Funktioniert nicht in Chrome 30. Ich habe überhaupt keine Probleme, Buchstaben in Ihre "Zahl" -Eingabe in der Geige einzugeben. Hmmm ...
— Ben
2
Was ist, wenn jemand Float-Werte wie 8.9 eingeben möchte?
— Syed Shah
6
Denken Sie für eine robustere Lösung auch daran, dass durch Kopieren und Einfügen diesem Beispiel Buchstaben hinzugefügt werden können!
— Neil
3
Hoppla!! Die erste Zeile muss geändert werden in:var charCode = (evt.which) ? evt.which : evt.keyCode;
— Peiman F.
33

Sie können auch das Musterattribut in HTML5 verwenden:

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

Tutorial zur Eingabevalidierung

Wenn Ihr Doctype dies nicht htmlist, müssen Sie meiner Meinung nach Javascript / JQuery verwenden.

— martincarlin87
quelle
3
Obwohl Firefox dem Eingabefeld einen roten Rand gibt, wenn Nicht-Zahlen eingegeben werden, können Sie sowohl in Firefox als auch in Chrome Nicht-Zahlen-Zeichen in das Eingabefeld eingeben.
— Chiel ten Brinke
Welchen Doctype verwenden Sie auf Ihrer Seite?
— Martincarlin87
ok, vielleicht wird es in deinen Browserversionen nicht unterstützt? Nicht 100% sicher, aber um ehrlich zu sein, würde ich auch einige js verwenden, um zu validieren. Ich würde mich im Moment nicht nur auf HTML5 verlassen
— martincarlin87
7
In der Eigenschaft können Sie Zahlen eingeben, das Formular jedoch nicht senden.
— My1
1
NUR VALIDIERUNG EINREICHEN!
— Eric Hodonsky
16

Schneller und einfacher Code

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

Dies erlaubt nur die Verwendung von Zahlen und Rücktasten.

Wenn Sie auch einen Dezimalteil benötigen, verwenden Sie dieses Codefragment

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

Bitte versuchen Sie diesen Code zusammen mit dem Eingabefeld selbst

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

es wird gut funktionieren.

— subindas pm
quelle
Wie lösche ich dann die Rücktaste?
— 6by3
7

Sie können eine verwenden <input type="number" /> . Dadurch können nur Zahlen in das Eingabefeld eingegeben werden.

Beispiel: http://jsfiddle.net/SPqY3/

Bitte beachten Sie, dass das Eingabe- type="number"Tag nur in neueren Browsern unterstützt wird.

Für Firefox können Sie die Eingabe mit Javascript überprüfen:

http://jsfiddle.net/VmtF5/

Update 2018-03-12: Die Browserunterstützung ist jetzt viel besser:

  • Chrome 6+
  • Firefox 29+
  • Opera 10.1+
  • Safari 5+
  • Kante
  • (Internet Explorer 10+)
— Stareamrainbowlabs
quelle
1
Es scheint sehr gut in Chrom zu funktionieren, aber nicht in Firefox.
— Chiel ten Brinke
Ah. Dies liegt daran, dass Firefox den Eingabetyp = Nummer nicht unterstützt. Alternativ können Sie Javascript verwenden, um die Eingabe zu überprüfen, während der Benutzer den Text eingibt. Antwort aktualisiert.
— Starbeamrainbowlabs
Das jscript auf jsfiddle.net/VmtF5 funktioniert ebenfalls nicht. Selbst wenn 1 Ziffer am Anfang des Zeichens steht, schlägt die Validierung fehl. Probieren Sie es selbst auf jsfiddle
— Akshay
@aarn Es funktioniert für mich (siehe i.imgur.com/AWdmEov.png ), welchen Browser verwenden Sie?
— Starbeamrainbowlabs
@starbeamrainbowlabs Ich benutze Firefox. Geben Sie auch 6abc ein, es wird Ihnen der Fehler nicht angezeigt
— Akshay
5 
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

und in der js:

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

oder Sie können es auf komplizierte, aber nützliche Weise schreiben:

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

Hinweis : Cross-Browser und Regex im Literal.

— Fredrick Gauss
quelle
Wie würden Sie die Möglichkeit hinzufügen, Eingaben wie .5 oder .3 zu setzen?
— user3591637
Dann müssen Sie das erste und das zweite Zeichen ( 0.43oder .43) berücksichtigen , die mit der Überprüfung des Werts der aktuellen Eingabe plus der gedrückten Taste durchgeführt werden können. Dies wäre in einzeiligem Code hässlich, ich empfehle, dafür eine Funktion zu verwenden. Überprüfen Sie hier , um Integer oder Float zu testen .
— Fredrick Gauss
1
Sie können eine versehentlich eingegebene Nummer nicht löschen
— Chris Sim
5

Ich habe reguläre Ausdrücke verwendet, um den Eingabewert durch das benötigte Muster zu ersetzen.

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">
Erweitern Sie das Snippet

— Shaktish
quelle
1
Deshalb liebe ich Regex. Danke, Mann, du hast meinen Tag wirklich gerettet
— Nirmal
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup wird ausgelöst, wenn die Taste losgelassen wird.

isNaN(parseFloat(value))? prüft, ob der Eingabewert keine Zahl ist.

Wenn es sich nicht um eine Zahl handelt, wird der Wert auf 1000 gesetzt. :Wenn es sich um eine Zahl handelt, wird der Wert auf den Wert gesetzt.

Hinweis: Aus irgendeinem Grund funktioniert es nur mittype="number"

Um es noch spannender zu machen, können Sie auch eine Grenze haben:

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

Genießen!

— user40521
quelle
4

Ich habe ein bisschen mit diesem gekämpft. Viele Lösungen hier und anderswo schienen kompliziert. Diese Lösung verwendet neben HTML auch jQuery / Javascript .

    <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);
    });

In meinem Fall verfolgte ich kleine Mengen mit einem Mindestwert von 1, daher min = "1" im Eingabe-Tag und abc = 1 im isNaN () -Prüfung. Bei nur positiven Zahlen können Sie diese Werte auf 0 ändern und sogar einfach min = "1" aus dem Eingabe-Tag entfernen, um negative Zahlen zu berücksichtigen.

Dies funktioniert auch für mehrere Boxen (und kann Ihnen einige Ladezeit sparen, wenn Sie sie einzeln nach ID ausführen). Fügen Sie bei Bedarf einfach die Klasse "validateNumber" hinzu.

Erläuterung

parseInt () macht im Grunde das, was Sie brauchen, außer dass es NaN zurückgibt und keinen ganzzahligen Wert. Mit einem einfachen if () können Sie den "Fallback" -Wert einstellen, den Sie in allen Fällen bevorzugen, in denen NaN zurückgegeben wird :-). Auch W3 gibt hier an, dass die globale Version von NaN vor der Überprüfung cast eingibt, was zusätzliche Beweise liefert (Number.isNaN () tut dies nicht). Alle an einen Server / Backend gesendeten Werte sollten dort noch validiert werden!

— Jesaja
quelle
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);" />
Erweitern Sie das Snippet

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

— Sameh Saeed
quelle
1
Wenn Sie einen Wert einfügen, der Text enthält, erlaubt es dies
— Chris Sim
1
Es erlaubt auch Sonderzeichen. Zum Beispiel: á, ã, ê, ó, è usw.
— AlmostPitt
3

Wenn Sie HTML5 verwenden können, können Sie dies tun. <input type="number" /> Wenn nicht, müssen Sie dies entweder über Javascript tun, wie Sie sagten, es wird nicht gesendet, um es von Codebehind aus zu tun.

<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 hat den Code nicht getestet, aber er sollte mehr oder weniger korrekt sein, wenn nicht nach Tippfehlern gesucht wird: D Vielleicht möchten Sie noch ein paar Dinge hinzufügen, z. B. was zu tun ist, wenn die Zeichenfolge null oder leer ist usw. Sie können dies auch schneller machen: D.

— czioutas
quelle
2

wenn nicht Ganzzahl 0 setzen

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

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
— websky
quelle
2

Die akzeptierte Antwort:

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

Es ist gut, aber nicht perfekt. Es funktioniert für mich, aber ich bekomme eine Warnung, dass die if-Anweisung vereinfacht werden kann.

Dann sieht es so aus, was viel schöner ist:

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

Würde den ursprünglichen Beitrag kommentieren, aber mein Ruf ist zu niedrig, um dies zu tun (habe gerade diesen Account erstellt).

— Chris H.
quelle
2

Sie können das <input>Tag mit dem Attributtyp = 'Nummer' verwenden.

Zum Beispiel können Sie verwenden <input type='number' />

Dieses Eingabefeld erlaubt nur numerische Werte. Sie können auch den Minimal- und Maximalwert angeben, der von diesem Feld akzeptiert werden soll.

— Geeth Chadalawada
quelle
2

Weitere Informationen finden Sie in meinem Projekt zum browserübergreifenden Wertfilter des Texteingabeelements auf Ihrer Webseite in JavaScript: Eingabeschlüsselfilter . Sie können den Wert als Ganzzahl oder Gleitkommazahl filtern oder einen benutzerdefinierten Filter schreiben, z. B. einen Telefonnummernfilter. Sehen Sie sich ein Beispiel für den Code der Eingabe einer Ganzzahl an:

<!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>
Erweitern Sie das Snippet

Siehe auch meine Seite "Integer field:" des Beispiels des Eingabeschlüsselfilters

— Andrej
quelle
2

Für allgemeine Zwecke können Sie die JS-Validierung wie folgt durchführen lassen:

Es funktioniert für Ziffernblock und normale Zifferntasten 

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
quelle
2

Fügen Sie in Ihrem Eingabe-Tag Folgendes hinzu: onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

— Naveen Kumar
quelle
2
Willkommen bei SO! Leider ist dies eine 5 1/2 Jahre alte Frage, die bereits eine akzeptierte Antwort hat. Vielleicht möchten Sie Fragen ohne Antworten hier durchsuchen: stackoverflow.com/unanswered
— AndroidNoobie
2

Ich habe einige Antworten aktualisiert, um Folgendes hinzuzufügen:

  • Fügen Sie die Methode als Erweiterungsmethode hinzu
  • Es darf nur ein Punkt eingegeben werden

  • Geben Sie an, wie viele Zahlen nach dem Dezimalpunkt zulässig sind.

    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
quelle
1

Ich benutze dies für Postleitzahlen, schnell und einfach.

<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
quelle
1

Wenn Sie diesen Code verwenden, können Sie "BackSpace Button" in Mozilla Firefox nicht verwenden. Sie können nur die Rücktaste in Chrome 47 && event.charCode <58; "pattern =" [0-9] {5} "erforderlich> verwenden

— Wendell Alvarez
quelle
0

Es ist besser, der REGEX-Bedingung "+" hinzuzufügen, um mehrere Ziffern (nicht nur eine Ziffer) zu akzeptieren:

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

— Dashko Leonid
quelle
0

Eine Möglichkeit könnte darin bestehen, ein Array zulässiger Zeichencodes zu haben und dann mithilfe der Array.includesFunktion zu überprüfen, ob eingegebene Zeichen zulässig sind.

Beispiel:

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

Einfach genug?

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

— Normajean
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.