개발일지/Error

[Error] input type="number" maxlength is not working

zineeworld 2023. 12. 4. 12:58
반응형

maxlength 속성은 주로 텍스트 및 비밀번호와 같은 입력 유형에 사용되어 입력 필드에서 허용되는 최대 문자 수를 지정하는 데 사용됩니다. 그러나 "number" 입력 유형에 대해 maxlength 속성은 지원되지 않습니다.

 

숫자 입력 필드의 경우 max 속성을 사용하여 허용되는 최대 값을 지정할 수 있습니다. 다음은 예제입니다.

<input type="number" max="100">

 

이 예제에서 입력 필드는 100까지의 숫자 값만 허용합니다. 숫자 자체의 값이 아닌 자릿수를 제한하려면 maxlength와 같은 직접적인 속성이 없으므로 JavaScript를 사용하여 이러한 제약을 강제할 수 있습니다.

다음은 숫자 입력의 자릿수를 제한하기 위한 JavaScript를 사용한 간단한 예제입니다.

<input type="number" id="numericInput" oninput="limitDigits(this, 5)"> 

<script> 
    function limitDigits(element, maxLength) { 
        if (element.value.length > maxLength) { 
        	element.value = element.value.slice(0, maxLength); 
        } 
    } 
</script>

 

이 예에서 limitDigits 함수는 사용자가 숫자 입력에 값을 입력할 때마다 호출됩니다. 입력의 길이를 확인하고 지정된 최대 길이(이 경우 5 자리)를 초과하면 값을 자르게 됩니다. 필요에 따라 maxLength 매개변수를 조절할 수 있습니다.

 
 
 
반응형