[JQuery]Input Text에 반각 숫자만 입력 받게 하기(일본어 전각 > 반각 변환)

[JQuery]Input Text에 반각 숫자만 입력 받게 하기(일본어  전각 > 반각 변환)

안녕하세요 미나라이입니다.

 

INPUT TEXT에 데이터 입력시에 반각 숫자만 입력 받게 하는 로직을 짜 보았습니다.IE-MODE같은 기능은 크롬 브라우저 같은 곳에서는 사용 할 수 없다고 해서 정규식 로직을 찾아서 작성 하게 되었네요일본에서 개발하다 보니까 전각문자 변환 처리도 넣어야 해서 이렇게 정리 해 봅니다.

 

모듈

1. 키보드 입력시에는 반각,전각 숫자만 입력 받도록 합니다. (keyup이벤트)

2. INPUT태그의 커서를 벗어날 때 전각 숫자는 반각 숫자로 변환시켜 줍니다. (blur이벤트)

// 전각,반각 숫자 정규식
var _NumberRegex = /[^0-9０-９]/gi;

$(document).on('keyup','.number-only',function(){
    $(this).val(ReplaceRegChar($(this).val(),_NumberRegex));
}).on('blur','.number-only',function(){
    $(this).val(ReplaceRegChar($(this).val(),_NumberRegex));
    $(this).val($(this).val().replace(/[０-９]/g,function(s){
        return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
    }));
});

// 문자열 치환
function ReplaceRegChar(str, reg) {
    return str.replace(reg,'');
}

 

사용 방법

사용 하고 싶은 input태그에 클래스 안에 number-only를 추가 해 주면 됩니다.

<input type="text" class="number-only">