고객이 숫자를 입력할 때, 입력한 숫자를 편하게 읽으려면 1,000 단위로 콤마를 찍어서 보여줘야 한다.
comma 없이 숫자만 주욱 입력해야 한다면, 입력한 숫자가 1000000인지 아니면 100000인지 쉽게 알 수가 없다.
또 기본 Input Form에는 어떤 통화가 기준인지 없는 경우, 달러인지 원인지 혼동을 줄 수도 있다. 고객을 불편하게 하는 항목 하나 하나가 서비스의 실패를 불러올 수도 있다.
구글링 결과 참고한 문서를 따라해 보며, 내용을 정리해본다. 1
Contents
1. 입력 받을 Form UI 구현
Form 과 Input 태그로 구성된 UI를 다음과 같이 구현한다.
See the Pen Formatting Currency Value: 01. Form UI by AHN KANG BUM (@bekseju) on CodePen.
이 때 주의할 점은 input type이 Number가 아니라 Text가 되어야 한다는 것이다.
2. Javascript 코드 추가
Javascript 코드를 다음과 같이 추가한다.
See the Pen Formatting Currency Value: 02. Javascript Code by AHN KANG BUM (@bekseju) on CodePen.
코드를 부분별로 살펴보면 다음과 같다. 기본적으론 form의 input 엘리먼트를 select하고, 그 엘리먼트에 keyboard 키를 누르고 뗄 때 동작하는 listener를 추가하는 방식으로 로직을 구현한다.
1. input 태그에서 사용자가 selection을 하고 있고, selection 된 내용이 blank가 아닌 경우 (즉, 무언가 선택한 경우), listener 로직을 타지 않고 종료한다.
즉, 사용자가 1234를 입력한 뒤 키보드를 사용하여 23을 선택한다고 하면, 아래 로직을 수행하지 않고 리스너를 빠져 나온다. 사용자는 23을 선택한 뒤 5를 입력해서 154로 숫자를 변경할 수 있을 것이다.
2. keyup 이벤트가 방향키인 경우 그대로 종료한다. 2
3. 이 이벤트를 발생시킨 this element를 $this 변수에, $this 변수의 값을 input 변수에 넣어준다.
이 때 input에 입력된 값은 “1234”와 같은 숫자로 된 text이다.
4. 숫자와 관련된 로직을 수행하기 위해선 위의 text를 정수로 변환해야 한다. 먼저 정규식을 사용해서 space, underscore, dash nderscore, dash 등을 제거한다.
5. 깔끔하게 정리된 input의 값을 parseInt 함수를 사용하여 Number Type으로 변환해준다.
6. 마지막으로 1,000단위별로 comma를 추가하기 위해 toLocaleString 함수를 적용한다.
끝.
3. 위/아래 화살표 누를 때 input 값 증가/감소시키기
See the Pen Formatting Currency Value: 03. Appendix by AHN KANG BUM (@bekseju) on CodePen.
변경된 부분만 살펴보면 다음과 같다.
2. 위 화살표 입력 시 extra에 + $step 값을, 아래 화살표 입력 시 – $step 값을 지정한다.
5. 위에서 지정한 extra 값을 input에 더해준다.
(추가) 4. PHP 코드에서 활용
1) 위 HTML을 PHP 코드로 출력할 때
다른 부분은 큰 문제 없었으나, 통화 기호인 ₩ 를 입력할 때 사용하는 Font의 종류에 따라 ₩(원)이 아닌 ¥(엔)으로 나올 수도 있다는 글을 본 적이 있어, HTML 을 출력하는 span 태그 부분을 아래와 같이 unicode를 사용하는 형태로 작성하였다. 3
<span class="currency"><?php echo json_decode('"\u20A9"');?></span>
2) Input 값을 PHP 코드에서 읽어들일 때
위 값을 PHP 코드에서 받아갈 땐 text 값을 다시 integer로 변환해야 한다. 아래와 같이 comma를 다시 제거하고 intval 함수를 사용하면 된다.
$input = intval(str_replace(",", "", $_POST['amount']));
그 외에 CSS 코드 관련해서 다음 문서를 참고하였다.
https://heropy.blog/2018/11/24/css-flexible-box/
https://webdir.tistory.com/349
Footnotes
- 참고문서
https://webdesign.tutsplus.com/tutorials/auto-formatting-input-value–cms-26745 - 위쪽 방향키를 선택할 땐 값이 증가, 아래쪽 방향키를 선택하면 값이 감소하게 구현할 수도 있다. 이 글의 뒷부분에서 직접 반영해보도록 하자.
- www.codejs.co.kr/통화-currency-기호-사용시-주의점/