본문 바로가기
프론트엔드/javascript

금액 입력 input 구현

by 느바 2023. 12. 29.
반응형

금액 입력 input 구현

 

기능 리스트

1. 마이너스를 포함한 정수만 입력한다.

2. 입력한 숫자에 천단위 콤마를 찍는다.

3. 숫자들이 입력되면 합계 계산을 한다.

 

구현 정책

1. input에 포커스 될 때

 1.1. input에 0 이 있으면 지운다.

 1.2. input에 0 외에 값이 있으면 천단위 마다 있는 콤마를 지운다.

2. input에 포커스가 빠져나올 때

 2.1. 마이너스만 있으면 0 으로 세팅

 2.2. 천단위 마다 콤마를 넣는다.

3. input이 keyup 될 때

 3.1. 마이너스와 숫자를 제외한 문자열이 입력되지 않도록 한다.

 3.2. 마이너스가 문자열의 두번째 이후에 있으면 지운다.

 3.3. 입력값이 마이너스 부호만 있는 경우를 제외하곤 합계 계산을 한다.

 

 

반응형