Input 태그에 숫자 넣기(계좌번호)

#0 목표

오늘의 목표는 계좌번호를 입력시킬 Input 컴포넌트를 제작하는 것! 조건은 아래와 같다

 

1. 표시방식 (우리 125-123-5123 => 1251235123) 이와같이 숫자만 표시되도록!

2. 모바일 기기로 해당 Input 을 클릭했을 때 숫자로 된 키패드가 나오도록!

3. 계좌번호를 복사해서 붙여넣는 경우!

 

 

#1 TMI

숫자를 받아야하는 input 태그에 보통 type="number" 를 지정하고 시작하는 경우가 많다.

하지만 상황에 따라 이 방법은 좋지 못하다 ㅜ

 

type="number" 인 input 태그

숫자가 아니어도 입력된 값은 순간적으로 보여주기도 하고

위 그림처럼 포커스를 해제했다가 이러가면 숫자가 아닌 값을 계속 입력시킬 수도 있다.

 

또한 가장 애 먹었던 부분 ( 또한 이 게시물을 남겨나야겠다고 다짐하게 만든) 은

웹에서 복사/붙여넣기, 모바일에서의 클립보드 이용 등으로 값을 한번에 붙여넣을 때이다. 

 type="number" 인 상태에서, 숫자 외의 값이 입력되면  e.target.value 으로 값을 받아올수가 없다. 🥺

 

 

#2 구현

구현 방식은 아래와 같다.

MUI의 Textfeild 태그를 사용할 때의 예시이다.

const [number, setNumber] = useState();

<TextField
  label="계좌번호"
  type="text"
  value={number}
  onPaste={handlePaste}
  onChange={handleOnChange}
  inputProps={{ pattern: '[0-9]*', inputMode: 'numeric' }}
/>

const handlePaste = (event) => {
  const pastedText = event.clipboardData.getData('text/plain');
  const filteredValue = pastedText.replace(/[^0-9]/g, '');
  setNumber(filteredValue);
  event.preventDefault();
};

const handleOnChange = (e) => {
  const { value } = e.target;
  const filteredValue = value.replace(/[^0-9]/g, '');
  setNumber(filteredValue);
};

- type

'number' 대신에 'text'를 사용하여 숫자가 아닌 값을 받더라도 e.target.value 값을 받아올 수 있도록 한다.

 

- onPaste

input 태그의 onPaste 속성을 이용하여 붙여넣기 이벤트를 추가해 준다.

이때 preventDefault()를 사용하여 해당 onPaste 변경 후에 다른 변경은 발생하지 않도록 해준다!

 

- inputProps

        - inputMode

         이 속성을 'numeric' 으로 설정해 줌으로 모바일 기기에서 숫자 키패드가 올라오도록 할 수 있다! 

 

 

참고로 안드로이드 기기에서 단순 '붙여넣기'를 사용하면 onPaste가 작동하지만

클립보드를 활용해서 붙여넣기를 하면 onPaste가 발동하지 않는다!

 

#코멘트는 언제나 환영입니다!