Wie lassen sich HTML-Eingabe-Tags nur numerische Werte akzeptieren?

Sie können das Musterattribut auch in html5 verwenden:

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

Eingabe-Validierungs-Tutorial

Wenn Ihr Doctype nicht html ist, müssen Sie etwas Javascript/Jquery verwenden.

Bitte versuche diesen Code zusammen mit dem Eingabefeld

<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.

Sie können einen <input type="number" /> verwenden. 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 Hilfe von Javascript überprüfen:

http://jsfiddle.net/VmtF5/

Update 2018-03-12: Die Browserunterstützung ist jetzt viel besser: Jetzt wird Folgendes unterstützt:

• Chrome 6+
• Firefox 29+
• Opera 10.1 und höher
• Safari 5+
• Kante
• (Internet Explorer 10+)

Ich habe ein bisschen mit diesem gekämpft. Viele Lösungen hier und anderswo erschienen kompliziert. Diese Lösung verwendet jQuery/javascript neben 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);
    });

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

Dies funktioniert auch für mehrere Boxen (und Sie könnten etwas Zeit sparen, indem Sie sie einzeln anhand der ID erledigen). Fügen Sie bei Bedarf einfach die Klasse "validateNumber" hinzu.

Erklärung

parseInt () macht im Grunde das, was Sie brauchen, mit der Ausnahme, dass es NaN anstelle eines ganzzahligen Werts zurückgibt. Mit einem einfachen if () können Sie den "Fallback" -Wert setzen, den Sie in allen Fällen bevorzugen, in denen NaN zurückgegeben wird :-). Auch W3 gibt an, hier , dass die globale Version von NaN vor der Überprüfung eine Typumwandlung vornimmt. .__ Alle an einen Server/Backend gesendeten Werte sollten dort noch geprüft werden!

<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.

note: Aus irgendeinem Grund funktioniert es nur mit type="number"

Um es noch aufregender 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!

<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

und in den 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 eine komplizierte Art und 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.

wenn Sie HTML5 verwenden können, können Sie <input type="number" /> Wenn nicht, müssen Sie es entweder durch Javascript tun, da Sie sagten, dass es nicht von Codebehind aus gesendet wird.

<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, er sollte jedoch mehr oder weniger korrekt sein, wenn nicht nach Tippfehlern gesucht wird: D Möglicherweise möchten Sie noch ein paar weitere Dinge hinzufügen, z mach das schneller: D

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

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

wenn keine Ganzzahl gesetzt ist 0

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

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

In meinem Projekt des Browserübergreifenden Filters des Wertes des Texteingabeelements auf Ihrer Webseite mit JavaScript-Sprache finden Sie folgende Informationen: Input Key Filter . Sie können den Wert als Ganzzahl, Float-Nummer oder als benutzerdefinierten Filter, z. B. als Telefonnummernfilter, filtern. Sehen Sie sich ein Beispiel für die Eingabe einer ganzen Zahl an:

<!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>

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

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 klappt 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 gering, um dies zu tun (erstellt gerade dieses Konto).

Sie können den Tag <input> mit dem Attributtyp = 'number' verwenden.

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

Dieses Eingabefeld lässt nur numerische Werte zu. Sie können auch den Minimalwert und den Maximalwert angeben, die von diesem Feld akzeptiert werden sollen.

Wie wäre es mit <input type="number"...>?

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

Auch hier ist eine Frage, die einige Beispiele für die Verwendung von Javascript zur Validierung hat .

Update: verknüpft mit einer besseren Frage (Danke, Alexblum).

Ich habe regulären Ausdruck verwendet, um den Eingabewert durch das erforderliche 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">

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

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>

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

Es funktioniert für numerische Tasten 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)"/>

http://www.texotela.co.uk/code/jquery/numeric/numerische Eingabe Credits an Leo Vũ für die Erwähnung dieses und natürlich von TexoTela. mit einer Testseite.

Wenn Sie diesen Code verwenden, können Sie "BackSpace Button" in Mozilla Firefox nicht verwenden. Sie können die Rücktaste nur in Chrome verwenden