[정규식] input숫자만입력&콤마적용 방법!!

 

안녕하세요. 오늘은 정규식에서 input창에 숫자만 적히면서 콤마를 붙일수도,

안 붙일수도 있는 정규식을 이야기해보겠습니다. 

 

 

---

 

 

JQUERY

 

우선 자바스크립트에 함수를 4개 만들어줍니다.

 

콤마붙이는 함수 / function comma(str)

콤마를 때는 함수 / function uncomma(str) 

숫자만 사용할 수 있는 함수 (+콤마) / function inputNumberFormat(obj)

숫자만 사용할 수 있는 함수 (콤마 X) / function inputOnlyNumberFormat(obj)

<script type="text/javascript">
    function comma(str) {
        str = String(str);
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
    }

    function uncomma(str) {
        str = String(str);
        return str.replace(/[^\d]+/g, '');
    } 
    
    function inputNumberFormat(obj) {
        obj.value = comma(uncomma(obj.value));
    }
    
    function inputOnlyNumberFormat(obj) {
        obj.value = onlynumber(uncomma(obj.value));
    }
    
    function onlynumber(str) {
	    str = String(str);
	    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g,'$1');
	}
</script>

 

 

 

 

HTML

 

 

그리고 HTML에서 input칸에 속성을 넣어줍니다.

아무래도 숫자를 쓰는 칸이기에 무한대로 쓰고 submit을 하면 에러가 나기 십상입니다.

이럴땐 maxlength를 사용하여 입력되는 숫자를 제한시켜줍니다.

그리고 가장 중요한 함수 사용되는 칸은 

onkeyup을 이용하여 함수이름을 쓰고 this값을 넣어줘서 입력값을 함수에 적용시킵니다.

 

<input type="text" maxlength="10" onkeyup="inputNumberFormat(this);"  />

 

 

 

글자는 안써지면서 숫자에 콤마가 붙는....대략 이런식으로 나오겠죠. 

 

 

 

 

각 상황에 따라 기호에 맞게 사용하시면 됩니다~~~