Chrome에서 입력 유형 =“번호”에 대해 maxlength가 무시 됨

maxlength속성은 작동하지 않습니다 <input type="number">. 이것은 Chrome에서만 발생합니다.

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

에 대한 MDN의 설명서에서<input>

값의 경우 유형 속성은 text, email, search, password, tel, 또는 url이러한 특성은 사용자가 입력 할 수있는 (유니 코드 코드 포인트)의 최대 문자 수 지정; 다른 제어 유형의 경우 무시됩니다.

따라서 설계 maxlength상 무시됩니다 <input type="number">.

필요에 따라, 당신은을 사용할 수 있습니다 min와 max같은 속성 이논 그 / 그녀의 대답에 제안 (주의 : -9999 ~ 9999 모두 0-4 다룰 것입니다하지만 이것은 단지, 제한된 범위의 값이 아닌 실제 문자 길이를 정의합니다 자릿수) 또는 일반 텍스트 입력을 사용하고 새 pattern속성 을 사용하여 필드에서 유효성을 검사 할 수 있습니다 .

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

최대 길이는 <input type="number"내가 아는 가장 좋은 방법으로 작동하지 않으므로 최대 길이 oninput를 제한하는 이벤트를 사용 하는 것입니다. 아래 코드를 참조하십시오.

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

많은 사람들 onKeyDown()이 전혀 작동하지 않는 이벤트를 게시 했습니다. 즉, 한도에 도달하면 삭제할 수 없습니다. 그래서 대신에 onKeyDown()사용onKeyPress() 하고 완벽하게 잘 작동합니다.

아래는 작업 코드입니다.

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

두 가지 방법이 있습니다

첫째 : 사용 type="tel"하면 type="number"모바일 에서처럼 작동 하고 최대 길이를 허용합니다.

<input type="tel" />

둘째 : 약간의 JavaScript를 사용하십시오.

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

min 및 max 속성을 사용할 수 있습니다 .

다음 코드도 동일합니다.

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

입력 유형을 텍스트로 변경하고 "oninput"이벤트를 사용하여 함수를 호출하십시오.

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

이제 Javascript Regex를 사용하여 사용자 입력을 필터링하고 숫자로만 제한하십시오.

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

데모 : https://codepen.io/aslami/pen/GdPvRY

한 번 같은 문제가 발생하여 내 요구와 관련 하여이 솔루션을 찾았습니다. 도움이 될 수 있습니다.

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

행복한 코딩 :)

길이 제한이있는 숫자 입력 에도이 방법을 시도 할 수 있습니다

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

데모 -JSFIDDLE

여기 jQuery와 함께 내 솔루션이 있습니다 ... 입력 유형 = 숫자에 maxlength를 추가해야합니다

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

그리고 복사하여 붙여 넣기를 처리하십시오.

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

누군가에게 도움이되기를 바랍니다.

내 경험상 사람들이 왜 maxlength무시 되는지 묻는 대부분의 문제 는 사용자가 "허용 된"문자 수 이상을 입력 할 수 있기 때문입니다.

다른 의견에서 언급했듯이 type="number"입력에는 maxlength속성 이 없으며 대신 minand max속성이 있습니다.

양식을 제출하기 전에 사용자가이를 인식 할 수 있도록하는 동안 삽입 할 수있는 문자의 수를 필드가 제한하게하려면 (브라우저는 값> max를 식별해야 함) 적어도 (지금은) 필드 청취자.

과거에 사용한 솔루션은 다음과 같습니다. http://codepen.io/wuori/pen/LNyYBM

이미 답변이 있지만 입력 내용이 maxlength속성 과 똑같이 또는 최대한 가깝게 동작 하도록하려면 다음 코드를 사용하십시오.

(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 (기술적으로 Blink) 은에 대해 maxlength 를 구현하지 않습니다<input type="number"> .

HTML5 사양에 따르면 maxlength는 text, url, e-mail, search, tel 및 password 유형에만 적용 할 수 있습니다.

내가 최근에 시도한 절대적인 해결책은 다음과 같습니다.

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

나는 이것을 빠르고 이해하기 쉽게 만들 것입니다!

maxlength 대신 type='number'(maxlength는 text유형 의 문자열에 대한 최대 문자 수를 정의 하기위한 것입니다) 대신 min=''and를 사용하십시오 max=''.

건배

<input type="number"> 그냥 ... 숫자 입력 (문자열에서 Javascript를 통해 부동으로 변환되지는 않지만)입니다.

내 생각에, 그것은 키 입력의 문자를 제한하지 않거나 maxLength사용자가 처음에 소수점을 잊어 버린 경우 "키 트랩"에 갇힐 수 있습니다 ( "maxLength"attr에 이미 도달 했을 때 .at at index를 시도하십시오) ). 그러나 속성 을 설정하면 양식 제출시 유효성이 검사됩니다 .1<input type"text">max

전화 번호를 제한 / 확인하려는 경우 type="tel"attr / value를 사용하십시오 . maxLengthattr을 준수하고 휴대 전화 키보드 만 제공합니다 (최신 브라우저). 입력을 패턴 (예 :)으로 제한 할 수 있습니다 pattern="[0-9]{10}".

React 사용자의 경우

최대 길이 요구 사항으로 10을 교체하십시오.

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

maxlenght-입력 유형 텍스트

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

jQuery를 사용하여 :

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

maxlenght-입력 유형 번호

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