maxlength ignorowane dla typu danych wejściowych = „liczba” w Chrome


231

maxlengthAtrybut nie działa z <input type="number">. Dzieje się tak tylko w Chrome.

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

Odpowiedzi:


277

Z dokumentacji MDN dla<input>

Jeśli wartość tego typu atrybutu jest text, email, search, password, tel, czy urlten atrybut określa maksymalną liczbę znaków w Unicode (punktów kodowych), które użytkownik może wprowadzić; dla innych typów kontroli jest ignorowany.

maxlengthJest więc ignorowany <input type="number">przez projekt.

W zależności od potrzeb możesz użyć atrybutów mini maxzgodnie z sugestią zawartą w jego odpowiedzi ( uwaga : określi to tylko ograniczony zakres, a nie rzeczywistą długość znaku wartości, chociaż od -9999 do 9999 obejmie wszystkie 0-4 cyfry) lub możesz użyć zwykłego wprowadzania tekstu i wymusić sprawdzenie poprawności w polu za pomocą nowego patternatrybutu:

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

13
Zauważ też, że type="number"jest to nowy typ ze specyfikacji HTML 5. Jeśli przeglądarka testujesz w nie rozpoznaje type="number"będzie go traktować jako type="text"który ma przestrzegać maxlengthatrybut. To może wyjaśniać zachowanie, które widzisz.
André Dion

8
@fooquency, nie ma Cię tutaj, ponieważ tak naprawdę nie możesz ograniczyć fizycznej długości „wprowadzania danych z klawiatury” type=numberprzez ustawienie maxatrybutu. Ten atrybut ogranicza tylko liczbę wybraną za pomocą pokrętła wejściowego.
Kamilius

5
co \d*tu jest
Pardeep Jain

4
wzorzec = „\ d *” nie działa w IE11 lub Firefox 56. jsfiddle.net/yyvrz84v
Reado

4
Używanie regexi wzorowanie jest niezwykle kreatywne. Ale w telefonach, nie inaczej, Androidlub iOS, to jest textwejście, więc powoduje złe UX.
AmerllicA

215

Maksymalna długość nie będzie działać <input type="number"w najlepszy znany mi sposób, aby użyć oninputzdarzenia w celu ograniczenia maksymalnej długości . Zobacz poniższy kod.

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

Znakomity. DZIĘKI!
taketheleap

Wersja @Guedes działa dla mnie na wszystkich testowanych urządzeniach, ustawiając typ na „liczba”. Jednak nie do końca rozumiem drugą część tego wyrażenia||0/1
Barleby

34
@Barleby. Po prostu oninput="this.value=this.value.slice(0,this.maxLength)"powinno działać
Washington Guedes

1
@ Powyższy kod WashingtonGuedesa działał dla mnie na <input type="number"> stackoverflow.com/questions/18510845/...
David Yeiser

1
Uwaga: takie podejście nie wyświetla początkowych zer!
HadidAli,

53

Wielu facetów opublikowało onKeyDown()zdarzenie, które w ogóle nie działa, tzn. Nie można go usunąć po osiągnięciu limitu. Więc zamiast onKeyDown()używać onKeyPress()i działa idealnie dobrze.

Poniżej działa kod:

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


3
jest to bardzo pomocne, krótsze i znacznie lepsze niż jakiekolwiek inne odpowiedzi tutaj, przy zachowaniu numbertypu danych wejściowych HTML5
Dexter Bengil

4
Próbowałem, po wprowadzeniu 4 cyfr, pole tekstowe, po prostu zamraża się bez miejsca na żadne aktualizacje, ani klawisz Delete, ani klawisz Backspace nie działają, nic nie działa, jak edytować dowolne cyfry, proszę wspomnieć.
Abbas

1
Udało mi się wprowadzić fragment kodu (ur. 1.2.3.4.5.5.6.76.7)
Alaa „

1
To powinna być zaakceptowana odpowiedź. Bardzo sprytny sposób na utrzymanie pola liczbowego. Pamiętaj tylko, aby dodać atrybut min / max, ponieważ przyciski spinania mogą nadal przekraczać 4 cyfry, jeśli są używane
NiallMitch14,

3
Nie działa, gdy wpiszesz 9999 i naciśniesz przycisk w górę na wejściu.
Csaba Gergely,

37

Mam na to dwa sposoby

Po pierwsze: użyj type="tel", będzie działać jak type="number"w telefonie komórkowym i zaakceptuje maxlength:

<input type="tel" />

Po drugie: użyj trochę JavaScript:

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

2
twoja druga odpowiedź nie jest zbyt dobra: jeśli osiągnąłeś 2 znaki, nie możesz usunąć żadnej liczby.
vtni

Tak, zauważyłem również, że wejście Number nie zwraca wartości. Długość, zresztą edytowałem go, włączając kod Backspace
Maycow Moura,

2
klucze tablicy i przycisk usuwania (do przodu) również powinny zawierać.
vtni

To jest miłe. i to działa tylko dla mnie..popularne
sprzedam Ahmed

1
Świetna odpowiedź, TNX. W tym przypadku nie widzę jednak powodu, aby używać „tel” zamiast „numer”. Ponadto możesz zastąpić swój stan „event.keyCode! = 8” słowem „event.keyCode> 47 && event.keyCode <58” w przypadku liczb naturalnych, aby uniemożliwić użytkownikowi wprowadzanie cyfr.
Dudi

28

Możesz użyć atrybutów min i max .

Poniższy kod robi to samo:

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

2
Powiedziałbym, że tutaj powinna być poprawna odpowiedź. Chrome przynajmniej wtedy zmienia rozmiar pudełka rozsądnie w oparciu o parametry min / max.
fooquency

70
Nie działa to, jeśli chcesz dodać ograniczenie długości, chociaż nie będziesz w stanie przekroczyć liczby, 9999którą użytkownik może ręcznie wpisać w liczbie przekraczającej tę długość.
Philll_t

10

Zmień typ wprowadzania na tekst i użyj zdarzenia „oninput”, aby wywołać funkcję:

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

Teraz użyj Javascript Regex, aby odfiltrować dane wejściowe użytkownika i ograniczyć je tylko do liczb:

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


1
najlepsza odpowiedź „tylko liczby”, jaką znalazłem. Inni używający evt.keycode wydają się zawieść na moim
Androidzie

1
Jednym z bardzo drobny mod, zmiana "this.id" na "to", numberOnly (id) do numberOnly (element), wtedy nie trzeba pierwszą linię numberOnly i działa bez id
tony

8

Kiedyś wpadłem na ten sam problem i znalazłem to rozwiązanie w odniesieniu do moich potrzeb. To może komuś pomóc.

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

Happy Coding :)


3

Możesz tego również spróbować w przypadku wprowadzania numerycznego z ograniczeniem długości

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

8
w niektórych przeglądarkach (szczególnie na urządzeniach mobilnych) dane telwejściowe będą automatycznie sprawdzane jako takie, aw niektórych dziwnych przypadkach wiodące litery 0s zostaną zmienione na 1s.
Philll_t

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


3

Oto moje rozwiązanie z jQuery ... Musisz dodać maxlength do swojego typu wejściowego = liczba

$('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;
});

I obsługuj kopiowanie i wklejanie:

$('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);
});

Mam nadzieję, że to komuś pomoże.


Miałem ten sam pomysł (chociaż użyłem zdarzenia „wejściowego”), ale myślę, że rozwiązanie, które @WashingtonGuedes napisało w komentarzu do innej odpowiedzi, jest znacznie prostsze: this.value = this.value.slice(0, this.maxLength);Czy uważasz, że ma to jakiś problem? Jak dotąd nie znalazłem. Obejmuje także wklejony tekst.
nonzaprej

Lubię długą drogę. Zastosowanie RegExp jest bardzo elastyczne.
harley81

2

Z mojego doświadczenia maxlengthwynika, że większość problemów, w których ludzie pytają, dlaczego jest ignorowana, polega na tym, że użytkownik może wprowadzić więcej niż „dozwoloną” liczbę znaków.

Jak stwierdzono w innych komentarzach, type="number"dane wejściowe nie mają maxlengthatrybutu, a zamiast tego mają atrybut mini max.

Aby pole ograniczyło liczbę znaków, które można wstawić, jednocześnie pozwalając użytkownikowi wiedzieć o tym przed przesłaniem formularza (w przeciwnym razie przeglądarka powinna określić wartość> max), musisz (przynajmniej na razie) dodać słuchacz pola.

Oto rozwiązanie, z którego korzystałem w przeszłości: http://codepen.io/wuori/pen/LNyYBM


min i max są tak dobre, jak i bezużyteczne, nie uniemożliwiają użytkownikowi wpisania nieskończonej liczby liczb w polu wprowadzania.
andreszs

Prawdziwe. Widzisz je tylko w akcji, gdy używasz klawiszy strzałek lub kontrolerów góra / dół (w Chrome itp.). Nadal możesz używać tych atrybutów do powiązania z kolejną weryfikacją, która zadziałała dla mnie. Pozwala to kontrolować limity za pomocą znaczników (i18n itp.) Vs. tylko JS.
M Wuori,

1

Wiem, że jest już odpowiedź, ale jeśli chcesz, aby Twoje dane wejściowe zachowywały się dokładnie tak, jak maxlengthatrybut lub jak najbliżej, użyj następującego kodu:

(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();

Podoba mi się ten, lekko poprawiłem go na własny użytek (nie chciałem, żeby ludzie wpisywali „e” w chrome, co jest dozwolone);
Mathijs Segers,


1

Absolutnym rozwiązaniem, które niedawno wypróbowałem, jest:

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

Ponieważ jest to ogólny JS, będzie działać wszędzie. Pracuję nad projektem przy użyciu Angular 5 i działa jak urok. Prawdopodobnie możesz poświęcić 10 minut na utworzenie usługi w kodzie kątowym, abyś mógł z niej ponownie korzystać w całym projekcie.
Pan Benedykt

0

Sprawię, że będzie to szybkie i łatwe do zrozumienia!

Zamiast maxlength for type='number'(maxlength ma na celu określenie maksymalnej liczby liter ciągu w texttypie), użyj min=''i max=''.

Twoje zdrowie


0

<input type="number"> jest po prostu ... wprowadzeniem liczby (aczkolwiek nie jest konwertowane z ciągu znaków na zmiennoprzecinkowe za pomocą Javascript).

Domyślam się, że nie ogranicza znaków do wprowadzania klucza przez maxLengthużytkownika, inaczej użytkownik może utknąć w „pułapce klawiszy”, jeśli na początku zapomniałby o przecinku (spróbuj wstawić .indeks 1po osiągnięciu <input type"text">wartości attr „maxLength” ). Będzie to jednak sprawdzane po przesłaniu formularza, jeśli ustawisz maxatrybut.

Jeśli próbujesz ograniczyć / zweryfikować numer telefonu, użyj wartości type="tel"attr /. Podlega maxLengthattr i wyświetla tylko klawiaturę numeryczną (w nowoczesnych przeglądarkach) i możesz ograniczyć wprowadzanie do wzorca (tj pattern="[0-9]{10}".).


0

Dla użytkowników React

Wystarczy wymienić 10 na wymaganą maksymalną długość

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

-1

maxlenght - tekst wejściowy

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

przy użyciu jQuery:

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

maxlenght - numer typu wejścia

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);">
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.