Zahleneingabetyp, der nur ganze Zahlen akzeptiert?

Question

Ich verwende die jQuery Tools Prüfer die HTML5-Validierungen durch jQuery implementiert.

Bis auf eine Sache hat es bisher gut funktioniert. In der HTML5-Spezifikation ist die Eingabe Typ "number" kann sowohl Ganzzahlen als auch Gleitkommazahlen enthalten.

Dies scheint unglaublich kurzsichtig zu sein, da es nur ein nützlicher Validator sein wird, wenn Ihre Datenbankfelder vorzeichenbehaftete Gleitkommazahlen sind (für vorzeichenlose Ints müssen Sie auf pattern Validierung und verlieren damit zusätzliche Funktionen wie die Auf- und Abwärtspfeile bei Browsern, die dies unterstützen).

Gibt es eine andere Eingabe Typ oder vielleicht ein Attribut das würde einschränken die Eingabe auf nur vorzeichenlos Ganzzahlen ?

Ich konnte keine finden.

---

Den Schritt auf 1 zu setzen ist keine Lösung, da dies die Eingabe nicht einschränkt. Sie können immer noch eine negative Gleitkommazahl in das Textfeld eingeben.

Außerdem bin ich mir 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 die Beschränkung einer Eingabe vom Typ "Zahl" auf positive ganzzahlige Werte erlaubt. Die Antwort auf diese Frage lautet offenbar "Nein, das ist nicht der Fall".

Ich wollte keine Mustervalidierung verwenden, da dies einige Nachteile bei der Verwendung von jQuery Tools Validierung, aber es scheint, dass die Spezifikation nicht für eine sauberere Art, dies zu tun.

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

Answer 2

Die meisten der Antworten sind veraltet.

Die folgenden nicht nicht mehr funktionieren:

<!-- It doesn't invalidate decimals when using validators -->
<input type="number" min="0" step="1" />

Die nachstehende Lösung ist viel eleganter und unkomplizierter und funktioniert mit allen aktuellen Browsern ab Anfang 2022.

<!-- It DOES invalidate decimals when using validators -->
<input type="number" pattern="\d*" />

Answer 3

Kurz und benutzerfreundlich

Diese Lösung unterstützt Tabulator, Backspace, Enter, Minus auf intuitive Weise

<input type=text onkeypress="return /^-?[0-9]*$/.test(this.value+event.key)">

erlaubt es jedoch nicht, eine bereits eingegebene Zahl in ein Minuszeichen umzuwandeln und behandelt keine Copy-Paste-Fälle.

Als Alternative können Sie eine Lösung verwenden, die auf R. Yaghoobi antworten die es erlaubt, Minuszeichen zu setzen und Groß- und Kleinschreibung beim Kopieren und Einfügen zu behandeln, aber sie löscht ganze Zahlen, wenn der Benutzer ein verbotenes Zeichen eingibt

<input type=text oninput="this.value= ['','-'].includes(this.value) ? this.value : this.value|0">

HINWEIS: Die oben genannten Inline-Lösungen sind nur für kleine Projekte geeignet. In anderen Fällen undurchsichtig sie in Funktionen und verschieben Sie auf Ihre js-Dateien.

Answer 4

Der Integer-Eingang würde bedeuten, dass er nur positive Zahlen, 0 und auch negative Zahlen verarbeiten kann. Dies ist, wie ich in der Lage gewesen, dies mit Javascript keypress zu erreichen.

<input type="number" (keypress)="keypress($event, $event.target.value)" >

keypress(evt, value){

    if (evt.charCode >= 48 && evt.charCode <= 57 || (value=="" && evt.charCode == 45))       
    {  
      return true;
    }
    return false;
}

Der angegebene Code erlaubt es dem Benutzer nicht, zur Laufzeit Alphabete oder Dezimalzahlen einzugeben, sondern nur positive und negative ganzzahlige Werte.

Answer 5

In the Future™ (siehe Kann ich die ), können Sie bei User-Agents, die Ihnen eine Tastatur anbieten, eine Texteingabe auf numerische Zeichen beschränken mit input[inputmode] .