wake-up-neo.com

HTML5: Zahleneingabetyp, der nur ganze Zahlen akzeptiert?

Ich verwende die jQuery-Tools Validator , die HTML5-Überprüfungen über jQuery implementiert. Bis auf eine Sache hat es bisher gut funktioniert. In der HTML5-Spezifikation kann der Eingabetyp "number" sowohl Ganzzahlen als auch Gleitkommazahlen enthalten. Dies scheint unglaublich kurzsichtig zu sein, da es nur dann nützlich ist, wenn Ihre Datenbankfelder vorzeichenbehaftete Fließkommazahlen enthalten (für unsignierte Werte müssen Sie auf "Muster" -Validierung zurückgreifen und dadurch zusätzliche Funktionen wie die Auf- und Abwärtspfeile verlieren für Browser, die dies unterstützen). Gibt es einen anderen Eingabetyp oder vielleicht ein Attribut, das die Eingabe auf gerade vorzeichenlose Ganzzahlen beschränkt? Ich konnte keine finden, danke.

EDIT

Ok, Jungs, ich schätze Ihre Zeit und Hilfe, aber ich sehe viele unverdiente Abstimmungen: D. Das Einstellen des Schritts auf 1 ist nicht die Antwort, da die Eingabe nicht eingeschränkt wird. Sie können weiterhin eine negative Gleitkommazahl in das Textfeld eingeben. Mir ist auch die Mustervalidierung bekannt (ich habe sie in meinem ursprünglichen Beitrag erwähnt), aber das war nicht Teil der Frage. Ich wollte wissen, ob es in HTML5 möglich ist, eine Eingabe des Typs "number" auf positive Ganzzahlwerte zu beschränken. Auf diese Frage wäre die Antwort "Nein, das geht nicht". Ich wollte die Mustervalidierung nicht verwenden, da dies bei der Verwendung der jQuery Tools-Validierung einige Nachteile mit sich bringt, aber jetzt scheint die Spezifikation eine sauberere Methode dafür nicht zuzulassen. 

jqueryhtml5validationjquery-tools
206
JayPea

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

273
Aurélien Ooms

Setzen Sie das step-Attribut auf 1:

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

Dies scheint momentan in Chrome ein bisschen fehlerhaft zu sein, daher ist es momentan vielleicht nicht die beste Lösung.

Eine bessere Lösung ist die Verwendung des pattern-Attributs, das einen regulären Ausdruck verwendet, um die Eingabe abzugleichen:

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

\d ist 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/

150
js-coder

Der einfache Weg mit JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
31
Tarek Kalaji
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Mit diesem Code wird die Eingabe in das Textfeld auf die Eingabe von Ziffern begrenzt. Pattern ist das neue Attribut, das in HTML5 verfügbar ist

Patter-Attribut doc

24
thejustv

Pattern is Nice, aber wenn Sie die Eingabe auf Zahlen nur mit type = "text" beschränken möchten, können Sie oninput und eine Regex wie folgt verwenden:

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

Ich wellt für mich :)

15
Viktor Karpyuk

Dies ist nicht nur für HTML5 alle Browser funktioniert gut. Versuche dies 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
14
karthick

Muster sind immer für die Einschränkung vorzuziehen, versuchen Sie oninput und min, um nur Zahlen ab 1 einzugeben 

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
7
Noothan y v

haben Sie versucht, das Attribut step so auf 1 zu setzen

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

Ja, HTML5 tut es. 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>

Siehe min und max paremeter? Ich habe es mit Chrome 19 (funktioniert) und Firefox 12 (nicht funktioniert) ausprobiert.

4
wilsonfoz

Ich arbeitete oh Chrome und hatte einige Probleme, obwohl ich HTML-Attribute verwende. Ich endete mit diesem js-Code

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

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

        return true;
});
3
a.valchev

Setze step="any". Funktioniert gut . Referenz: http://blog.isotoma.com/2012/03/html5-input-typennummer-and-decimalsfloats-in-chrome/

3
udit mittal

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 .

2
Black Shell

Setzen Sie das step-Attribut auf eine beliebige Float-Nummer, z. 0,01 und du bist gut zu gehen.

2
Mantas K.

Aus den Spezifikationen

step="any" oder positive Gleitkommazahl
Gibt die Granularität des Werts des Elements an.

Sie können es also einfach auf 1 setzen:

2
David Hedlund
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);
    }
});
2
Sarthak

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

2
illeas
 <input type="number" min="0" step="1" pattern="\d+"/>
1
Nikolay_R

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.

0
Michal