Maximale Länge für Eingabetyp = "Nummer" in Chrome ignoriert

Das maxlengthAttribut funktioniert nicht mit <input type="number">. Dies geschieht nur in Chrome.

<input type="number" class="test_css"  maxlength="4"  id="flight_number" name="number"/>

Aus der MDN-Dokumentation für<input>

Wenn der Wert des Typ - Attribut ist text, email, search, password, tel, oder url, gibt dieses Attribut die maximale Anzahl von Zeichen (in Unicode - Codepunkte), die der Benutzer eingeben kann; Bei anderen Steuerelementtypen wird dies ignoriert.

Wird maxlengthalso <input type="number">vom Design ignoriert .

Abhängig von Ihren Anforderungen können Sie die Attribute minund maxwie in der Antwort vorgeschlagen verwenden ( Hinweis : Dies definiert nur einen eingeschränkten Bereich, nicht die tatsächliche Zeichenlänge des Werts, obwohl -9999 bis 9999 alle 0-4 abdecken Ziffern) oder Sie können eine reguläre Texteingabe verwenden und die Validierung des Feldes mit dem neuen patternAttribut erzwingen :

<input type="text" pattern="\d*" maxlength="4">

Die maximale Länge funktioniert nicht mit <input type="number"der besten Art und Weise, wie ich weiß, das oninputEreignis zu verwenden, um die maximale Länge zu begrenzen. Bitte beachten Sie den folgenden Code.

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

Viele Leute haben ein onKeyDown()Ereignis gepostet , das überhaupt nicht funktioniert, dh Sie können es nicht löschen, sobald Sie das Limit erreicht haben. Also statt zu onKeyDown()benutzen onKeyPress()und es funktioniert einwandfrei.

Unten ist Arbeitscode:

User will not be allowed to enter more than 4 digits
<br>
<input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" />

Ich habe zwei Möglichkeiten, wie Sie das tun können

Erstens: Verwenden Sie es type="tel", es funktioniert wie type="number"auf Mobilgeräten und akzeptiert die maximale Länge:

<input type="tel" />

Zweitens: Verwenden Sie ein wenig JavaScript:

<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />

Sie können die Attribute min und max verwenden .

Der folgende Code macht dasselbe:

<input type="number" min="-999" max="9999"/>

Ändern Sie Ihren Eingabetyp in Text und rufen Sie mit dem Ereignis "oninput" die Funktion auf:

<input type="text" oninput="numberOnly(this.id);" class="test_css" maxlength="4" id="flight_number" name="number"/>

Verwenden Sie jetzt Javascript Regex, um Benutzereingaben zu filtern und nur auf Zahlen zu beschränken:

function numberOnly(id) {
    // Get element by id which passed as parameter within HTML element event
    var element = document.getElementById(id);
    // Use numbers only pattern, from 0 to 9
    var regex = /[^0-9]/gi;
    // This removes any other character but numbers as entered by user
    element.value = element.value.replace(regex, "");
}

Demo: https://codepen.io/aslami/pen/GdPvRY

Ich bin einmal auf dasselbe Problem gestoßen und habe diese Lösung in Bezug auf meine Bedürfnisse gefunden. Es kann jemandem helfen.

<input type="number" placeholder="Enter 4 Digits" max="9999" min="0" 
onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;"
/>

Viel Spaß beim Codieren :)

Sie können dies auch für numerische Eingaben mit Längenbeschränkung versuchen

<input type="tel" maxlength="4" />

<input type="number" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">

DEMO - JSFIDDLE

Hier ist meine Lösung mit jQuery ... Sie müssen Ihrem Eingabetyp = Nummer die maximale Länge hinzufügen

$('body').on('keypress', 'input[type=number][maxlength]', function(event){
    var key = event.keyCode || event.charCode;
    var charcodestring = String.fromCharCode(event.which);
    var txtVal = $(this).val();
    var maxlength = $(this).attr('maxlength');
    var regex = new RegExp('^[0-9]+$');
    // 8 = backspace 46 = Del 13 = Enter 39 = Left 37 = right Tab = 9
    if( key == 8 || key == 46 || key == 13 || key == 37 || key == 39 || key == 9 ){
        return true;
    }
    // maxlength allready reached
    if(txtVal.length==maxlength){
        event.preventDefault();
        return false;
    }
    // pressed key have to be a number
    if( !regex.test(charcodestring) ){
        event.preventDefault();
        return false;
    }
    return true;
});

Und behandeln Kopieren und Einfügen:

$('body').on('paste', 'input[type=number][maxlength]', function(event) {
    //catch copy and paste
    var ref = $(this);
    var regex = new RegExp('^[0-9]+$');
    var maxlength = ref.attr('maxlength');
    var clipboardData = event.originalEvent.clipboardData.getData('text');
    var txtVal = ref.val();//current value
    var filteredString = '';
    var combined_input = txtVal + clipboardData;//dont forget old data

    for (var i = 0; i < combined_input.length; i++) {
        if( filteredString.length < maxlength ){
            if( regex.test(combined_input[i]) ){
                filteredString += combined_input[i];
            }
        }
    }
    setTimeout(function(){
        ref.val('').val(filteredString)
    },100);
});

Ich hoffe es hilft jemandem.

Nach meiner Erfahrung sind die meisten Probleme, bei denen gefragt wird, warum maxlengthignoriert wird, darauf zurückzuführen, dass der Benutzer mehr als die "zulässige" Anzahl von Zeichen eingeben darf.

Wie andere Kommentare erwähnten, type="number"Eingänge haben kein maxlengthAttribut und stattdessen eine hat minund maxAttribut.

Damit das Feld die Anzahl der Zeichen begrenzt, die eingefügt werden können, während der Benutzer sich dessen bewusst ist, bevor das Formular gesendet wird (der Browser sollte ansonsten den Wert> max identifizieren), müssen Sie (zumindest vorerst) a hinzufügen Zuhörer auf dem Feld.

Hier ist eine Lösung, die ich in der Vergangenheit verwendet habe: http://codepen.io/wuori/pen/LNyYBM

Ich weiß, dass es bereits eine Antwort gibt, aber wenn Sie möchten, dass sich Ihre Eingabe genau wie das maxlengthAttribut verhält oder so nah wie möglich ist, verwenden Sie den folgenden Code:

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();

Chrome (technisch gesehen Blink) implementiert keine maximale Länge für <input type="number">.

Die HTML5-Spezifikation besagt, dass die maximale Länge nur für die Typen Text, URL, E-Mail, Suche, Telefon und Kennwort gilt.

Die absolute Lösung, die ich kürzlich ausprobiert habe, ist:

<input class="class-name" placeholder="1234567" name="elementname"  type="text" maxlength="4" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

Ich werde das schnell und einfach verständlich machen!

Verwenden Sie anstelle von maxlength for type='number'(maxlength soll die maximale Anzahl von Buchstaben für eine Zeichenfolge in einem textTyp definieren) min=''und max=''.

Prost

<input type="number"> ist nur das ... eine Zahleneingabe (wenn auch nicht von einer Zeichenfolge konvertiert, um über Javascript zu schweben).

Ich vermute, es schränkt die Zeichen bei der Schlüsseleingabe durch nicht ein, maxLengthoder Ihr Benutzer könnte in einer "Schlüsselfalle" stecken bleiben, wenn er zu Beginn eine Dezimalstelle vergessen hat (Versuchen Sie, einen .at-Index zu setzen, 1wenn bereits ein <input type"text">"maxLength" -Attr erreicht wurde ). Es wird jedoch beim Senden des Formulars überprüft, wenn Sie ein maxAttribut festlegen .

Wenn Sie versuchen, eine Telefonnummer einzuschränken / zu validieren, verwenden Sie den type="tel"Wert attr / value. Es gehorcht dem maxLengthattr und ruft nur die Handynummern-Tastatur auf (in modernen Browsern), und Sie können die Eingabe auf ein Muster beschränken (dh pattern="[0-9]{10}").

Für React-Benutzer

Ersetzen Sie einfach 10 durch Ihre maximale Länge

 <input type="number" onInput={(e) => e.target.value = e.target.value.slice(0, 10)}/>

maxlenght - Text vom Typ Eingabe

<input type="email" name="email" maxlength="50">

Verwenden von jQuery:

$("input").attr("maxlength", 50)

maxlenght - Eingabetypnummer

JS

function limit(element, max) {    
    var max_chars = max;
    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    } 
}

HTML

<input type="number" name="telefono" onkeydown="limit(this, 20);" onkeyup="limit(this, 20);">