HTML5: Zahleneingabetyp, der nur Ganzzahlen akzeptiert?

249

Ich verwende den jQuery Tools Validator, der HTML5-Validierungen über jQuery implementiert. Bis jetzt hat es großartig funktioniert, bis auf eine Sache. In der HTML5-Spezifikation kann der Eingabetyp "number" sowohl Ganzzahlen als auch Gleitkommazahlen enthalten. Dies scheint unglaublich kurzsichtig zu sein, da es nur dann ein nützlicher Validator ist, wenn Ihre Datenbankfelder mit Gleitkommazahlen signiert sind (für vorzeichenlose Ints müssen Sie auf die "Muster" -Validierung zurückgreifen und verlieren dadurch zusätzliche Funktionen wie das Auf und Ab Pfeile für Browser, die dies unterstützen). Gibt es einen anderen Eingabetyp oder vielleicht ein Attribut, das die Eingabe auf nur vorzeichenlose Ganzzahlen beschränkt? Ich konnte keine finden, danke.

BEARBEITEN

Ok, Leute, ich schätze deine Zeit und Hilfe, aber ich sehe viele unverdiente Up-Voting: D. Das Setzen des Schritts auf 1 ist nicht die Antwort, da die Eingabe dadurch nicht eingeschränkt wird. Sie können weiterhin eine negative Gleitkommazahl in das Textfeld eingeben. Ich bin mir auch der Mustervalidierung bewusst (ich habe sie in meinem ursprünglichen Beitrag erwähnt), aber das war nicht Teil der Frage. Ich wollte wissen, ob HTML5 es erlaubt, eine Eingabe vom Typ "number" auf positive ganzzahlige Werte zu beschränken. Auf diese Frage scheint die Antwort "nein, tut es nicht" zu sein. Ich wollte die Mustervalidierung nicht verwenden, da dies bei der Verwendung der jQuery Tools-Validierung einige Nachteile mit sich bringt, aber es scheint, dass die Spezifikation keine sauberere Möglichkeit bietet, dies zu tun.

jquery html validation jquery-tools JayPea
quelle
3
Ab 2019 - ich weiß nicht seit wann - numberakzeptiert die Eingabe (zumindest in FF / Chrome / Safari) jetzt standardmäßig nur Ganzzahlen, es sei denn, Sie legen einen expliziten Wert für das stepattr fest, der Dezimalwerte zulässt. zB : step="0.01". MDN hier dokumentiert . In zwei Köpfen darüber, weil ich denke, dass es ein vernünftiger Standard ist, aber auch eine bahnbrechende Änderung (ja, es hat sich auf einen Code ausgewirkt, den ich geschrieben habe).
Darragh Enright

Antworten:

326

https://www.w3.org/wiki/HTML/Elements/input/number

Das Beste, was Sie nur mit HTML erreichen können

<input type="number" min="0" step="1"/>
Erweitern Sie das Snippet

Aurélien Ooms
quelle
6
Sie sollten wahrscheinlich festlegen min, dass 1er positive Zahlen (und keine nicht negativen Zahlen) möchte.
Martin Thoma
1
@pwdst Ich werde das unterstützen. <input type="number" min="0" step="1"/>ist die richtigste Antwort auf die Frage. Wie auch immer, was bringt es, beides step="1"und zu haben pattern="\d+"? In beiden Fällen kann ich keine Gleitkommazahlen eingeben.
Dänischer Ashfaq
27
Bei der neuesten Version von Chrome hat dies bei mir nicht funktioniert. Es können keine Buchstaben eingegeben werden, aber Sonderzeichen können eingefügt werden.
Malavos
2
Warum ich e
Grant Sun
4
@grantsun für Exponentialzahlen zB 10e20.
Sn3ll
180

Setzen Sie das stepAttribut auf 1:

<input type="number" step="1" />

Dies scheint derzeit in Chrome etwas fehlerhaft zu sein, daher ist es derzeit möglicherweise nicht die beste Lösung.

Eine bessere Lösung besteht darin, das patternAttribut zu verwenden, das einen regulären Ausdruck verwendet, um mit der Eingabe übereinzustimmen:

<input type="text" pattern="\d*" />

\dist der reguläre Ausdruck für eine Zahl, *bedeutet, dass mehr als eine davon akzeptiert wird. Hier ist die Demo: http://jsfiddle.net/b8NrE/1/

js-coder
quelle
2
Wie JayPea erfahren hat, unterstützen noch nicht alle Browser alle HTML5-Elemente. Daher ist es am besten, eine angemessene Verschlechterung bereitzustellen, wie Sie vorgeschlagen haben.
DOK
6
Die @ Zut HTML5-Validierung hindert Sie nicht daran, diese Schlüssel einzugeben. Es wird lediglich verhindert, dass das Formular mit diesen Zeichen gesendet wird. Wenn Sie ein Formular mit einer Eingabe des Typs senden number, der andere Zeichen enthält, zeigt Chrome eine Fehlermeldung an.
Js-Coder
2
@dotweb - Ich verstehe deinen Standpunkt. Der Unterschied zwischen den beiden besteht darin, dass mit dem Attribut number alle alphabetischen Zeichen automatisch entfernt werden, wenn ich die Auswahl für die Eingabe abwähle (Unschärfe auslösen). Dies ist bei Verwendung des Musterattributs nicht der Fall. Ich denke, diese Unterscheidung ist nur wichtig, wenn Sie AJAX zum Posten Ihrer Daten verwenden und ein anderes Ereignis verwenden, als submitdas Posten auszulösen.
Zut
6
Dies macht nicht das, was OP verlangt hat. Nur ganze Zahlen /\d*/.test(1.1) // true
vsync
2
@vsync pattern="\d*"ist nicht das gleiche wie /\d*/, pattern="\d*"gleich /^(?:\d*)$/, finden Sie in HTML5 Muster Attribut Dokumentation .
Wiktor Stribiżew
37 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Mit diesem Code kann bei der Eingabe in das Textfeld nur Ziffern eingegeben werden. Muster ist das neue Attribut, das in HTML 5 verfügbar ist.

Musterattribut doc

thejustv
quelle
9
Entsprechend der Spezifikation kann das Musterattribut nur verwendet werden, wenn der Eingabetyp Text, Suche, URL, Telefon, E-Mail, Passwort ist (wie hier mit dem Typ "Text" gezeigt). Dies bedeutet, dass bei Verwendung dieser Methode die Semantik des Zahleneingabetyps und damit (wichtig) der numerischen Bildschirmtastaturen einiger Tablets und Telefone verloren geht.
pwdst
3
In Firefox 36.0 können Sie Buchstaben und Sonderzeichen eingeben.
Malavos
1
Die Eingabe beschränkt sich nicht nur auf Zahlen, Sie können trotzdem Buchstaben eingeben!
HadidAli
35

Der einfache Weg mit JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
Tarek Kalaji
quelle
Ich verstehe nichtreplace(/(\..*)\./g, '$1')
codyc4321
3
Dies ist wichtig, um Float-Nummern zu akzeptieren und .nur einmal zu wiederholen , z 123.556. B. kann geschrieben werden.
Tarek Kalaji
8
@ TarekKalaji - Fragen Staaten Ganzzahlen und nicht Float-Zahlen
vsync
Wie wäre es mit einem mobilen Gerät? weil Text alle Tastaturen anzeigen (auch alfanumerische Zeichen)
Nuri YILMAZ
27

Das Muster ist nett, aber wenn Sie die Eingabe nur mit type = "text" auf Zahlen beschränken möchten, können Sie oninput und einen regulären Ausdruck wie folgt verwenden:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

Ich warke für mich :)

Viktor Karpyuk
quelle
Beachten Sie, dass dieser Ansatz möglicherweise Ihre (Änderungs-) Methode (Ereignishandler) negiert und Ihren Standardwert im Eingabefeld löscht.
HadidAli
14

Dies gilt nicht nur für HTML5. Alle Browser funktionieren einwandfrei. Versuche dies 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
Leopard
quelle
12
Das ist schlecht. Versuchen Sie bei der Eingabe: Umschalt + Start, Umschalt + Ende, Strg + A, Strg + C, Strg + V. Verwenden Sie oninputstattdessen
Zanderwar
1
Als diese Antwort geschrieben wurde, wurde HTML5 nicht veröffentlicht. @ Zanderwar
Muhammet Can TONBUL
11

Muster sind immer besser für die Beschränkung, versuchen oninputund mintreten 1 für die Eingabe nur Zahlen von 1 ab

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
Noothan yv
quelle
Es ist eine sehr lehrreiche Lösung. Was ist für `value = $ {var}`?
Entwickler
@AcademyofProgrammer Beispiel Standardwert für diese Eingabe
Shinigamae
beste Antwort! Funktioniert zum Einfügen, funktioniert sogar in IE (10+), gibt Ihnen die Freiheit, jede Tastatur über den Eingabetyp anzuzeigen, und lässt diese lästigen Auf- / Ab-Pfeile im Feld nicht in Chrom angezeigt werden.
Janosch
5

Haben Sie versucht, das stepAttribut wie folgt auf 1 zu setzen?

<input type="number" step="1" />
DevTeamExpress
quelle
4

Vielleicht passt es nicht in jeden Anwendungsfall, aber

<input type="range" min="0" max="10" />

kann einen guten Job machen: Geige .

Überprüfen Sie die Dokumentation .

Luca Fagioli
quelle
3

Ja, HTML5 schon. Versuchen Sie diesen Code ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

Sehen Sie den Min- und Max-Paremeter? Ich habe es mit Chrome 19 (funktioniert) und Firefox 12 (nicht funktioniert) versucht.

Wilsonfoz
quelle
Dies setzt voraus, dass Sie einen bekannten Bereich wünschen. Aber wenn Sie einen ganzzahligen Wert wollten , würde dies trotzdem funktionieren?
RandomHandle
3

Geben Sie es einfach in Ihr Eingabefeld ein: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

illeas
quelle
3

Ich habe oh Chrome gearbeitet und hatte einige Probleme, obwohl ich HTML-Attribute verwende. Am Ende hatte ich diesen js-Code

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
a.valchev
quelle
Ich habe dies auch mit 1 kleinen Tweak verwendet; Ich habe parseInt (Wert) in parseInt (value.replace ('.', '') Geändert. Dadurch konnte ich 1,56 einfügen und den angezeigten Wert bei 156 statt 1 halten.
Codescribblr
2

Aus den Spezifikationen

step="any"oder positive Gleitkommazahl
Gibt die Wertegranularität des Elementwerts an.

Sie können es also einfach auf Folgendes einstellen 1:

David Hedlund
quelle
8
Ich habe es versucht, aber das Problem ist, dass Sie immer noch eine Gleitkommazahl in das Textfeld eingeben können.
JayPea
Sie benötigen also Code, der den Benutzer daran hindert, einen Dezimalpunkt einzugeben?
Blazemonger
2

Setzen Sie das stepAttribut auf eine beliebige Gleitkommazahl, z. B. 0,01, und Sie können loslegen.

Mantas K.
quelle
1 
var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});
Sarthak
quelle
0

Derzeit ist es nicht möglich, einen Benutzer daran zu hindern, Dezimalwerte nur mit HTML in Ihre Eingabe zu schreiben. Sie müssen Javascript verwenden.

Michal
quelle
0 

<input type="number" oninput="this.value = Math.round(this.value);"/>
Erweitern Sie das Snippet

R. Yaghoobi
quelle
-2

In Future ™ (siehe Kann ich verwenden ) können Sie auf Benutzeragenten, die Ihnen eine Tastatur präsentieren, eine Texteingabe auf nur numerisch mit beschränken input[inputmode].

Weston
quelle
inputmodeDies ist hauptsächlich für Handheld-Geräte gedacht und löst das richtige Tastaturlayout aus. Bei "normalen" Computern mit Tastaturen wird jedoch nicht verhindert, dass Sie das eingeben, was Sie möchten.
vsync