취업/자바스크립트

[JS] INPUT 소수점 컨트롤 및 소수점 한번만 입력하게 하기

카슈밀 2022. 11. 16. 08:44
반응형

HTML

<input
 type="number"
 onkeypress="return isNumberKey(event)" 
/>

 

JS

let decimalType = 1;
function isNumberKey(evt) {
    let charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return true;
    // Textbox value    

    let _value = event.srcElement.value;    
    // 소수점(.)이 두번 이상 나오지 못하게
    if(decimalType == '특정타입') { // 특정 타입의 경우 아예 입력 못하게 막기
        if (charCode == 46) {
            return false;
        }
    } else {
        let _pattern0 = /^\d*[.]\d*$/; // 현재 value값에 소수점(.) 이 있으면 . 입력불가
        if (_pattern0.test(_value)) {
            if (charCode == 46) {
                return false;
            }
        }
    }
    
    
    // 소수점 컨트롤 0, 3, 4자리만 입력 가능하게 만들었다. 입력가능
    let _pattern2;

    switch(decimalType) {
        case 1:
            _pattern2 = /^\d*[.]\d{4}$/;
            break;
        case 2:
            _pattern2 = /^\d*[.]\d{3}$/;
            break;
        case 0:
            _pattern2 = /[^0-9]/g,'';
            break;
        default:
            _pattern2 = /^\d*[.]\d{4}$/;
            break;
    }

    if (_pattern2.test(_value)) {
        return false;
    }  
    return true;
}

이걸 만드는 이유가 귀찮아서 안 만들었는데, 여기저기 쓰게 되어서

굳이 귀찮음을 무릎쓰고 해당 코드를 찾아 변형해서 사용하고 있다.

 

해당 코드는 한글과 영문의 입력을 아예 막는 부분이다.

이상 끝.

 

 

728x90