JQuery AlphaNumeric Plugin 한글 문제 수정

[출처] http://suyeong.net/
웹페이지 개발하다보면 숫자만 입력받는 경우나 문자만 입력받아야 하는 경우가 종종 있는데

 

Native Javascript로 구현할 수도 있겠지만

JQuery를 사용한다면 Plugin을 이용하면 JQuery의 Selector를 사용할 수 있어서 좋습니다.

 

숫자나 영문자만 입력받거나, 추가로 일부 특수문자도 입력허용하도록 하는
jQuery AlphaNumeric 라는 Plugin을 찾았는데 문제가 좀 있네요.

 

개발자 하신 분이 이역만리에 떨어져 있는 사람들까지는 미처 신경쓰지 못해

숫자만 입력받도록 하든 영문자만 입력받도록 하든 한글은 써집니다.

그리고 어떤 이유에서 인지는 모르겠으나... Underscore('_') 도 항상 허용됩니다.

그래서 조금 수정을 했습니다.

 

먼저 한글문제를 해결하기 위해서 강조된 2군데 라인을 찾아서 (원본 기준으로 60, 76 라인입니다.)

view source

print?

01.$.fn.numeric = function(p) {

02.    var az = "abcdefghijklmnopqrstuvwxyz";

03.    az += az.toUpperCase();

04.    p = $.extend({

05.        nchars: az

06.      }, p);   

07.    return this.each (function()

08.        {

09.  

10.            $(this).alphanumeric(p);

11.        }

12.    );

13.};

14.  

15.$.fn.alpha = function(p) {

16.    var nm = "1234567890";

17.    p = $.extend({

18.        nchars: nm

19.      }, p);   

20.    return this.each (function()

21.        {

22.  

23.            $(this).alphanumeric(p);

24.        }

25.    );  

26.};

 

이렇게 수정합니다.

view source

print?

1.return this.each (function()

2.    {

3.        $(this).css('ime-mode', 'disabled');

4.        $(this).alphanumeric(p);

5.    }

 

다음, Underscore는 원본기준 6번 라인에 특수문자가 죽 나열되어 있는 곳에 아래같이 underscore 를 하나 끼워 넣습니다.

view source

print?

1.p = $.extend({

2.    ichars: "!@#$%^&*()+=[]\\\';,/{}|\":<>?~`.-_ ",

3.    nchars: "",

4.    allow: ""

5.  }, p);

 

아래는 간단한 사용법입니다.

1. 숫자만 입력 허용
   view source

   print?

   1.$('#test').numeric();
2. 영문자만 입력 허용
   view source

   print?

   1.$('#test').alpha();
3. 영문 + 숫자 입력 허용
   view source

   print?

   1.$('#test').alphanumeric();
4. 숫자 + comma + dot 입력 허용 (위에서 막아버린 underscore 도 필요한 경우 아래와 같이 allow에 추가 하면 됩니다.)
   view source

   print?

   1.$('#test').numeric({allow:".,"});