it-swarm.com.de

maxlength wird für den Eingabetyp = "number" in Chrome ignoriert

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

<input type="number" class="test_css"  maxlength="4"  id="flight_number" name="number"/>
124
Prajila V P

Aus MDNs Dokumentation für <input>

Wenn der Wert des Attributs typetext, email, search, password, tel oder url ist, gibt dieses Attribut die maximale Anzahl von Zeichen (in Unicode-Codepunkten) an, die der Benutzer eingeben kann. Bei anderen Steuerelementtypen wird es ignoriert.

Daher wird maxlength von Design <input type="number"> ignoriert.

Je nach Ihren Anforderungen können Sie die min- und max-Attribute als inon verwenden, die in ihrer Antwort vorgeschlagen werden (Hinweis: dies definiert nur einen eingeschränkten Bereich, nicht die tatsächliche Zeichenlänge des Werts, jedoch zwischen -9999 und 9999) deckt alle 0-4 Ziffern ab), oder Sie können eine normale Texteingabe verwenden und die Validierung des Feldes mit dem neuen Attribut pattern erzwingen:

<input type="text" pattern="\d*" maxlength="4">
169
André Dion

Die maximale Länge funktioniert nicht mit <input type="number". Die beste Methode, die ich kenne, ist die Verwendung von oninput, um die maximale Länge zu begrenzen. Bitte sehen Sie den Code unten.

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

Sie können die Attribute min und max verwenden.

Der folgende Code macht dasselbe:

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

Ich habe zwei Möglichkeiten, dies zu tun

Erstens: Verwenden Sie type="tel", es funktioniert wie type="number" in Mobile und akzeptiert maxlength:

<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;" />
19
Maycow Moura

Viele Leute haben ein onKeyDown()-Ereignis gepostet, das nicht funktioniert funktioniert, d.h. Verwenden Sie also anstelle von onKeyDown()onKeyPress() und es funktioniert einwandfrei. 

Unten ist der 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;" />

12
VicJordan

Ich bin einmal in das gleiche Problem geraten 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;"
/>

Glückliche Kodierung :)

4
Mohammad Mahroz

Hier ist meine Lösung mit jQuery ... Sie müssen maxlength zu Ihrem Eingabetyp = number 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 mit Kopieren und Einfügen umgehen:

$('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.

3
harley81
<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

2
Surya R Praveen

Ändern Sie Ihren Eingabetyp in Text und verwenden Sie das Ereignis "oninput", um die Funktion aufzurufen:

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

Verwenden Sie nun Javascript Regex, um die 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

2
Masood Aslami

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

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

Nach meiner Erfahrung sind die meisten Probleme, bei denen Leute fragen, warum maxlength ignoriert wird, weil der Benutzer mehr als die "erlaubte" Anzahl von Zeichen eingeben darf. 

Wie in anderen Kommentaren angegeben, haben type="number"-Eingänge kein maxlength-Attribut und stattdessen ein min- und max-Attribut.

Damit das Feld die Anzahl der Zeichen begrenzen kann, die eingefügt werden können, während der Benutzer dies vor dem Senden des Formulars wissen kann (der Browser sollte den Wert> max angeben, andernfalls), müssen Sie (vorerst zumindest) ein Zuhörer auf das Feld. 

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

1
M Wuori

Ich weiß, dass es bereits eine Antwort gibt, aber wenn Sie möchten, dass sich Ihre Eingabe genau wie das maxlength-Attribut verhält oder so nahe wie möglich, verwenden Sie 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();
1
Philll_t

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" />
0
Mr. Benedict

Ich werde das schnell und einfach verständlich machen!

Anstelle von maxlength für type='number' (maxlength definiert die maximale Anzahl von Buchstaben für eine Zeichenfolge in einem Typ textname__) verwenden Sie min='' und max=''.

Prost

0
Dat Boi Trump

Chrome (technisch blinkend) implementiert maxlength für <input type="number"> nicht.

Die HTML5-Spezifikation besagt, dass Maxlength nur für die Typen Text, URL, E-Mail, Suche, Tel und Kennwort gilt.

0
pwnall