Input:text 입력 제한 - input:text iblyeog jehan

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

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

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

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

<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.replace(replaceId, "");

}

$(this).val(x);

}

}).on("keyup"function() {

$(this).val($(this).val().replace(replaceId, ""));

});

});

</script>

cs

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

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

<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.replace(replaceNotInt, "");

}

$(this).val(x);

}

}).on("keyup"function() {

$(this).val($(this).val().replace(replaceNotInt, ""));

});

});

</script>

cs

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

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

<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.replace(replaceChar, "").replace(replaceNotFullKorean, "");

}

$(this).val(x);

}

}).on("keyup"function() {

$(this).val($(this).val().replace(replaceChar, ""));

});

});       

</script>

cs

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

Input:text 입력 제한 - input:text iblyeog jehan