maxlength diabaikan untuk tipe input = "angka" di Chrome

The maxlengthatribut tidak bekerja dengan <input type="number">. Ini hanya terjadi di Chrome.

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

Dari dokumentasi MDN untuk<input>

Jika nilai dari jenis atribut text, email, search, password, tel, atau url, atribut ini menentukan jumlah maksimum karakter (di Unicode poin kode) bahwa pengguna dapat memasukkan; untuk tipe kontrol lainnya, ini diabaikan.

Jadi maxlengthdiabaikan <input type="number">oleh desain.

Tergantung pada kebutuhan Anda, Anda dapat menggunakan mindan maxatribut sebagai inon disarankan dalam / nya jawabannya (NB: ini hanya akan menentukan rentang dibatasi, tidak panjang karakter yang sebenarnya dari nilai, meskipun -9.999-9999 akan mencakup semua 0-4 angka digit), atau Anda dapat menggunakan input teks biasa dan memberlakukan validasi pada bidang dengan patternatribut baru :

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

Panjang max tidak akan bekerja dengan <input type="number"cara terbaik yang saya tahu adalah menggunakan oninputevent untuk membatasi maxlength. Silakan lihat kode di bawah ini.

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

Banyak orang memposting onKeyDown()acara yang tidak berfungsi sama sekali yaitu Anda tidak dapat menghapus begitu Anda mencapai batas. Jadi, alih-alih onKeyDown()menggunakan onKeyPress()dan berfungsi dengan sangat baik.

Di bawah ini adalah kode kerja:

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

Saya punya dua cara untuk Anda melakukannya

Pertama: Gunakan type="tel", ini akan berfungsi seperti type="number"di seluler, dan menerima panjang maksimal:

<input type="tel" />

Kedua: Gunakan sedikit JavaScript:

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

Anda dapat menggunakan atribut min dan max .

Kode berikut melakukan hal yang sama:

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

Ubah tipe input Anda menjadi teks dan gunakan fungsi "oninput" untuk memanggil fungsi:

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

Sekarang gunakan Javascript Regex untuk memfilter input pengguna dan batasi hanya pada angka:

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

Saya pernah mengalami masalah yang sama dan menemukan solusi ini sehubungan dengan kebutuhan saya. Mungkin membantu Seseorang.

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

Selamat Coding :)

Anda dapat mencoba ini juga untuk input numerik dengan batasan panjang

<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

Ini adalah solusi saya dengan jQuery ... Anda harus menambahkan maxlength ke input type = number Anda

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

Dan menangani salin dan tempel:

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

Saya harap ini membantu seseorang.

Dalam pengalaman saya kebanyakan masalah di mana orang bertanya mengapa maxlengthdiabaikan adalah karena pengguna diizinkan untuk memasukkan lebih dari jumlah karakter yang "diizinkan".

Seperti komentar lain katakan, type="number"input tidak memiliki maxlengthatribut dan, sebaliknya, memiliki atribut mindan max.

Agar bidang membatasi jumlah karakter yang dapat dimasukkan sambil memungkinkan pengguna mengetahui hal ini sebelum formulir dikirimkan (browser harus mengidentifikasi nilai> maks jika tidak), Anda harus (untuk saat ini, setidaknya) menambahkan pendengar ke lapangan.

Berikut ini adalah solusi yang pernah saya gunakan: http://codepen.io/wuori/pen/LNyYBM

Saya tahu sudah ada jawaban, tetapi jika Anda ingin input Anda berperilaku persis seperti maxlengthatribut atau sedekat mungkin, gunakan kode berikut:

(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 (secara teknis, Blink) tidak akan menerapkan panjang maksimum untuk <input type="number">.

Spesifikasi HTML5 mengatakan bahwa maxlength hanya berlaku untuk jenis teks, url, email, pencarian, tel, dan kata sandi.

Solusi absolut yang baru saja saya coba adalah:

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

Saya akan membuat ini cepat dan mudah dimengerti!

Alih-alih maxlength untuk type='number'(maxlength dimaksudkan untuk menentukan jumlah maksimum huruf untuk string dalam suatu texttipe), gunakan min=''dan max=''.

Bersulang

<input type="number"> hanya saja ... sejumlah input (meskipun, tidak dikonversi dari string ke float via Javascript).

Dugaan saya, itu tidak membatasi karakter pada input kunci oleh maxLengthatau pengguna Anda bisa terjebak dalam "jebakan kunci" jika mereka lupa desimal di awal (Coba letakkan .indeks at 1ketika <input type"text">attr "maxLength" telah tercapai ). Namun itu akan memvalidasi pada formulir kirim jika Anda menetapkan maxatribut.

Jika Anda mencoba membatasi / memvalidasi nomor telepon, gunakan type="tel"attr / nilai. Ini mematuhi maxLengthattr dan menampilkan keyboard nomor ponsel saja (di browser modern) dan Anda dapat membatasi input ke suatu pola (yaitu pattern="[0-9]{10}").

Untuk pengguna Bereaksi,

Cukup ganti 10 dengan persyaratan panjang maks

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

maxlenght - tipe input teks

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

menggunakan jQuery:

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

maxlenght - nomor tipe input

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