it-swarm.com.de

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

Ich muss sicherstellen, dass ein bestimmtes <input>-Feld nur Zahlen als Wert ..__ enthält. Daher wird es nicht übermittelt, sodass das Validieren während der Übermittlung keine Option ist. Ich möchte, dass der Benutzer keine anderen Zeichen als Zahlen eingeben kann.

Gibt es einen ordentlichen Weg, um dies zu erreichen?

108

HTML 5

Sie können 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: Dafür gibt es eine neue und sehr einfache Lösung:

Damit können Sie den Eingabefilter any für einen Text <input>, .__ verwenden. einschließlich verschiedener numerischer Filter. Dies wird korrekt mit Kopieren + Einfügen, Ziehen + Ablegen, Tastenkombinationen, Kontextmenüvorgänge, Tasten, die nicht eingegeben werden können, und alle Tastaturlayouts.

Siehe diese Antwort oder probiere es selbst bei JSFiddle .

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

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

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

Wenn Sie Dezimalzahlen 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/

233
Viral Patel

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.

22
martincarlin87

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.

7
subindas pm

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+)
5

function AllowOnlyNumbers(e) {

    e = (e) ? e : window.event;
    var key = null;
    var charsKeys = [
        97, // a  Ctrl + a Select All
        65, // A Ctrl + A Select All
        99, // c Ctrl + c Copy
        67, // C Ctrl + C Copy
        118, // v Ctrl + v paste
        86, // V Ctrl + V paste
        115, // s Ctrl + s save
        83, // S Ctrl + S save
        112, // p Ctrl + p print
        80 // P Ctrl + P print
    ];

    var specialKeys = [
    8, // backspace
    9, // tab
    27, // escape
    13, // enter
    35, // Home & shiftKey +  #
    36, // End & shiftKey + $
    37, // left arrow &  shiftKey + %
    39, //right arrow & '
    46, // delete & .
    45 //Ins &  -
    ];

    key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;

    //console.log("e.charCode: " + e.charCode + ", " + "e.which: " + e.which + ", " + "e.keyCode: " + e.keyCode);
    //console.log(String.fromCharCode(key));

    // check if pressed key is not number 
    if (key && key < 48 || key > 57) {

        //Allow: Ctrl + char for action save, print, copy, ...etc
        if ((e.ctrlKey && charsKeys.indexOf(key) != -1) ||
            //Fix Issue: f1 : f12 Or Ctrl + f1 : f12, in Firefox browser
            (navigator.userAgent.indexOf("Firefox") != -1 && ((e.ctrlKey && e.keyCode && e.keyCode > 0 && key >= 112 && key <= 123) || (e.keyCode && e.keyCode > 0 && key && key >= 112 && key <= 123)))) {
            return true
        }
            // Allow: Special Keys
        else if (specialKeys.indexOf(key) != -1) {
            //Fix Issue: right arrow & Delete & ins in FireFox
            if ((key == 39 || key == 45 || key == 46)) {
                return (navigator.userAgent.indexOf("Firefox") != -1 && e.keyCode != undefined && e.keyCode > 0);
            }
                //DisAllow : "#" & "$" & "%"
                //add e.altKey to prevent AltGr chars
            else if ((e.shiftKey || e.altKey) && (key == 35 || key == 36 || key == 37)) {
                return false;
            }
            else {
                return true;
            }
        }
        else {
            return false;
        }
    }
    else {
        return true;
       }
    }
<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />

3
Sameh Saeed

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!

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

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

2
Fredrick Gauss

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

2
czioutas

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

1
Naveen Kumar

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;
    };
    
1
Plexis Plexis

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

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

1
Andrej

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

1
Chris H.

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.

1

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

1
dan1111

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

1
Shaktish

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

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>
0
Justin Buser

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)"/>
0
yasir poongadan

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.

0
Clark Superman

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

0
Wendell Alvarez