Javascript

input text 입력 제한 기능 정리

SaintsP 2019. 3. 7. 18:09

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



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





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



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


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



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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
cs





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



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


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



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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
cs





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



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


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



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

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


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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>
cs




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