maxlength bị bỏ qua cho loại đầu vào = Số hiệu Số trong Chrome

Các maxlengththuộc tính không được làm việc với <input type="number">. Điều này chỉ xảy ra trong Chrome.

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

Từ tài liệu của MDN cho<input>

Nếu giá trị của các loại thuộc tính là text, email, search, password, tel, hay url, thuộc tính này xác định số ký tự tối đa (tại các điểm mã Unicode) mà người dùng có thể nhập; đối với các loại điều khiển khác, nó bị bỏ qua.

Vì vậy, maxlengthđược bỏ qua trên <input type="number">thiết kế.

Tùy thuộc vào nhu cầu của bạn, bạn có thể sử dụng minvà maxcác thuộc tính như inon đề xuất trong / câu trả lời của mình (NB: điều này sẽ chỉ xác định một phạm vi ràng buộc, không phải là chiều dài nhân vật thực tế của giá trị, mặc dù -9.999-9999 sẽ bao gồm tất cả 0-4 số chữ số) hoặc bạn có thể sử dụng kiểu nhập văn bản thông thường và thực thi xác thực trên trường với patternthuộc tính mới :

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

Độ dài tối đa sẽ không hoạt động với <input type="number"cách tốt nhất mà tôi biết là sử dụng oninputsự kiện để giới hạn mức tối đa. Xin vui lòng xem mã dưới đây.

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

Nhiều người đã đăng onKeyDown()sự kiện hoàn toàn không hoạt động, tức là bạn không thể xóa một khi bạn đạt đến giới hạn. Vì vậy, thay vì onKeyDown()sử dụng onKeyPress()và nó hoạt động hoàn toàn tốt.

Dưới đây là mã làm việc:

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

Tôi có hai cách để bạn làm điều đó

Đầu tiên: Sử dụng type="tel", nó sẽ hoạt động như type="number"trong thiết bị di động và chấp nhận tối đa:

<input type="tel" />

Thứ hai: Sử dụng một chút JavaScript:

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

Bạn có thể sử dụng các thuộc tính tối thiểu và tối đa .

Các mã sau đây làm tương tự:

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

Thay đổi kiểu nhập của bạn thành văn bản và sử dụng sự kiện "oninput" để gọi hàm:

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

Bây giờ sử dụng Javascript Regex để lọc đầu vào của người dùng và chỉ giới hạn ở số:

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

Bản trình diễn: https://codepen.io/aslami/pen/GdPvRY

Tôi đã từng gặp vấn đề tương tự và tìm thấy giải pháp này liên quan đến nhu cầu của tôi. Nó có thể giúp một số người.

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

Chúc mừng mã hóa :)

Bạn cũng có thể thử điều này cho đầu vào số với giới hạn độ dài

<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 - NHẬP KHẨU

Đây là giải pháp của tôi với jQuery ... Bạn phải thêm maxlength vào kiểu nhập = number

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

Và xử lý sao chép và dán:

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

Tôi hy vọng nó sẽ giúp được ai đó.

Theo kinh nghiệm của tôi, hầu hết các vấn đề mà mọi người đang hỏi tại sao lại maxlengthbị bỏ qua là vì người dùng được phép nhập nhiều hơn số ký tự "được phép".

Như các ý kiến ​​khác đã nêu, type="number"đầu vào không có maxlengththuộc tính và thay vào đó, có một thuộc tính minvà max.

Để có trường giới hạn số lượng ký tự có thể được chèn trong khi cho phép người dùng nhận thức được điều này trước khi biểu mẫu được gửi (trình duyệt nên xác định giá trị> tối đa khác), bạn sẽ phải (ít nhất là bây giờ) thêm người nghe đến hiện trường.

Đây là một giải pháp tôi đã sử dụng trong quá khứ: http://codepen.io/wuori/pen/LNyYBM

Tôi biết đã có câu trả lời, nhưng nếu bạn muốn đầu vào của mình hoạt động chính xác như maxlengththuộc tính hoặc gần nhất có thể, hãy sử dụng mã sau:

(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 (về mặt kỹ thuật, Blink) sẽ không triển khai tối đa cho <input type="number">.

Đặc tả HTML5 nói rằng maxlength chỉ có thể áp dụng cho các loại văn bản, url, e-mail, tìm kiếm, tel và mật khẩu.

Giải pháp tuyệt đối mà tôi vừa mới thử là:

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

Tôi sẽ làm điều này nhanh chóng và dễ hiểu!

Thay vì maxlength cho type='number'(maxlength có nghĩa là xác định số lượng chữ cái tối đa cho một chuỗi trong một textloại), hãy sử dụng min=''và max=''.

Chúc mừng

<input type="number"> chỉ là ... một đầu vào số (mặc dù, không được chuyển đổi từ một chuỗi để nổi qua Javascript).

Tôi đoán, nó không hạn chế các ký tự trên đầu vào khóa bởi maxLengthnếu không người dùng của bạn có thể bị kẹt trong "bẫy khóa" nếu họ quên một số thập phân ngay từ đầu (Hãy thử đặt một .chỉ mục 1khi <input type"text">đã đạt đến mức "maxLạng" ). Tuy nhiên, nó sẽ xác nhận trên biểu mẫu gửi nếu bạn đặt một maxthuộc tính.

Nếu bạn đang cố gắng hạn chế / xác thực số điện thoại, hãy sử dụng type="tel"attr / value. Nó tuân theo maxLengthattr và chỉ hiển thị bàn phím số di động (trong các trình duyệt hiện đại) và bạn có thể hạn chế nhập vào một mẫu (tức là pattern="[0-9]{10}").

Đối với người dùng React,

Chỉ cần thay thế 10 với yêu cầu chiều dài tối đa của bạn

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

maxlenght - văn bản loại đầu vào

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

sử dụng jQuery:

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

maxlenght - số loại đầu vào

Mã não

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