input text 입력 제한 기능 정리

input text를 사용하다보면 숫자만 입력 받는다거나, 특수문자는 입력하지 못하게 하는 등의 입력 제한이 필요한 때가 많이 있습니다.

Javascript의 match와 정규식을 활용하면 간단하게 입력 제한을 걸어줄 수 있습니다.

case 1. 특수문자 입력을 제한

다음과 같이 특수문자 < > ( ) 의 입력을 제한해야 하는 input이 있습니다.

<input type="text" id="inputId" maxlength="30" />

Javascript로 입력 제한할 특수문자의 정규식과 match, keyup, focusout 메소드를 사용하여 간단하게 해결할 수 있습니다.

<script>
    
    // 입력을 제한 할 특수문자의 정규식
    var replaceId  = /[<>()]/gi;
    
    $(document).ready(function(){
        
        $("#inputId").on("focusout", function() {
            var x = $(this).val();
            if (x.length > 0) {
                if (x.match(replaceId)) {
                   x = x.replace(replaceId, "");
                }
                $(this).val(x);
            }
        }).on("keyup", function() {
            $(this).val($(this).val().replace(replaceId, ""));

        });

    });
 
</script>

case 2. 숫자만 입력하도록 제한

마찬가지로 숫자만 입력받아야 하는 input이 있습니다.

<input type="text" id="inputPhone" maxlength="30" />

역시 Javascript로 간단하게 해결할 수 있습니다.

<script>
    
    // 숫자가 아닌 정규식
    var replaceNotInt = /[^0-9]/gi;
    
    $(document).ready(function(){
        
        $("#inputPhone").on("focusout", function() {
            var x = $(this).val();
            if (x.length > 0) {
                if (x.match(replaceNotInt)) {
                   x = x.replace(replaceNotInt, "");
                }
                $(this).val(x);
            }
        }).on("keyup", function() {
            $(this).val($(this).val().replace(replaceNotInt, ""));
        });
 
    });
 
</script>

case 3. 숫자, 특수문자, 불완성형 한글을 제외하여 입력하도록 제한

이번에는 숫자, 특수문자, 불완성형 한글을 제외하여 입력받아야 하는 input이 있습니다.

<input type="text" id="inputName" maxlength="30" />

한글을 완성하기 위해서는 자음 모음이 연달아 입력이 되어야 합니다. 

따라서 불완성형 한글을 검사하는 부분은 focusout에서만 실행해야 한글이 정상 입력이 됩니다. 

특수문자를 치환하는 부분은 이전처럼 keyup과 focusout에 동일하게 걸어줍니다.

<script>    
 
    // 특수문자 정규식 변수(공백 미포함)
    var replaceChar = /[~!@\#$%^&*\()\-=+_'\;<>0-9\/.\`:\"\\,\[\]?|{}]/gi;
 
    // 완성형 아닌 한글 정규식
    var replaceNotFullKorean = /[ㄱ-ㅎㅏ-ㅣ]/gi;
    
    $(document).ready(function(){
        
        $("#inputName").on("focusout", function() {
            var x = $(this).val();
            if (x.length > 0) {
                if (x.match(replaceChar) || x.match(replaceNotFullKorean)) {
                    x = x.replace(replaceChar, "").replace(replaceNotFullKorean, "");
                }
                $(this).val(x);
            }
            }).on("keyup", function() {
                $(this).val($(this).val().replace(replaceChar, ""));

       });

    });       
    
 
</script>

이를 활용하면 다양한 제한들을 간단하게 걸어줄 수 있습니다.