Input 숫자 콤마 - Input susja komma

1. 숫자에 콤마를 넣고 싶어!

• input창에 숫자를 입력하면 콤마 없이 나타난다.
• 하지만 숫자를 입력했을 때 셋째 자리마다 콤마를 찍고 싶을 때가 있다.1234567890 //일반 1,234,567,890 //콤마 추가

어떻게 하면 숫자에 콤마를 추가할 수 있을까?
대부분 알려진 방법은 정규식으로 콤마를 추가하는 방법이다!
하지만 오늘은 toLocaleString를 사용해보자~

2. toLocaleString는 무엇인가요?

• toLocaleString는 숫자를 지역별 포맷으로 반환한다.(문자열로 반환)
• 또한, 원본을 변경하지 않는다.
• 이 속성에는 여러 인자가 있는데, 아래 표를 살펴보자!

인자설명예시

ko-KR	셋째자리에 콤마 추가	"3,540,000"
cs-CZ	셋째자리에 띄어쓰기 추가	"3 540 000"
da-DK	셋째자리에 온점 추가	"3.540.000"
de-CH	셋째자리에 따옴표 추가	"3’540’000"

• 구체적인 사용방법은 아래와 같다.

const a = 3540000; console.log(a.toLocaleString('ko-KR')) //"3,540,000" console.log(a.toLocaleString('cs-CZ')) //"3 540 000" console.log(a.toLocaleString('da-DK')) //"3.540.000" console.log(a.toLocaleString('de-CH')) //"3’540’000"

3. input에 입력한 숫자에 콤마를 넣어보자

아래 예시는 입력칸에 숫자를 입력했을 때, 콤마가 붙은 형태로 보여준다.
작성한 코드에 대해 간단히 알아보자

See the Pen input-split-number by KumJungMin (@kumjungmin) on CodePen.

(1). html에 input 추가

[1] 입력칸을 만들기 위해 id="number"인 input을 추가한다.

<!--html--> <input type="text" id="number"/> <!--[1]-->

(2). js로 컨트롤하기

[1] id="number"인 input을 가져온다.
[2] 키입력이 있을 때마다 포맷팅을 해야하므로 keyup이벤트를 사용한다.

const input = document.querySelector('#number'); //[1] input.addEventListener('keyup', function(e) { ... }) //[2]

[3] e.target.value를 사용해 input에 입력된 값을 가져온다.

... input.addEventListener('keyup', function(e) { let value = e.target.value; //[3] ... })

[4]에서 왜 input값에 replaceAll, Number처리를 하나요?

... input.addEventListener('keyup', function(e) { let value = e.target.value; value = Number(value.replaceAll(',', '')); //[4] ... })

: 우리는 키입력이 있을 때마다, 포맷팅된 문자열을 input에 넣을 것이다.
: 그렇기에 input에서 "XXX,XX"처럼 콤마가 포함된 문자열이 온다.
: 하지만 toLocaleString는 숫자를 입력받아야 한다.
: 그러므로 replaceAll(',', '')로 콤마를 제외하고, Number()로 숫자 처리를 해줘야 한다.

[5] toLocaleString('ko-KR')을 해서 숫자에 콤마를 추가한다.
[6] 마지막으로 input.value을 사용해 포맷팅된 값을 input에 넣는다.

... input.addEventListener('keyup', function(e) { let value = e.target.value; value = Number(value.replaceAll(',', '')); const formatValue = value.toLocaleString('ko-KR'); //[5] input.value = formatValue; //[6] })

추가적으로 문자를 입력했을 때 0으로 초기화하려면 아래와 같이 하면 된다.

const input = document.querySelector('#number'); input.addEventListener('keyup', function(e) { let value = e.target.value; value = Number(value.replaceAll(',', '')); if(isNaN(value)) { //NaN인지 판별 input.value = 0; }else { //NaN이 아닌 경우 const formatValue = value.toLocaleString('ko-KR'); input.value = formatValue; } })

출처
아래 링크로 가면 더 알 수 있다구~ 👍👍

• MDN Web Docs, toLocaleString
• hianna님의 포스팅, 숫자 3자리(천단위) 마다 콤마 찍는 2가지 방법

(일부 오류가 있어 onlynumber 함수를 추가하였습니다. 2021년 5월 11일)

안녕하세요. 오늘은 정규식에서 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);" />

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

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