styled-components Input 숫자 입력

1. 화살표 숨기기

type을 number로 하면 나오는 화살표를 없애보자

import styled from 'styled-components';
import Select from 'react-select'

const InputFeeField = styled.input`
  ::-webkit-inner-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }
  ::-webkit-outer-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }    
`;

<InputFeeField placeholder="배달료" type="number" />

2. e, + - 입력 막기

화살표를 없애고 나서도 e와 + -는 입력이 가능하다
이것도 없애보자

import styled from 'styled-components';
import Select from 'react-select'

const InputFeeField = styled.input`
  ::-webkit-inner-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }
  ::-webkit-outer-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }    
`;

<InputFeeField 
  onKeyDown={(e) => ["e", "E", "+", "-"].includes(e.key) && e.preventDefault()}
  placeholder="배달료" 
  type="number" 
/>

3. 숫자 길이 제한하기

배달비는 10000 다섯자리 안에서 해결 될 것이기 때문에
다섯자리까지만 입력이 되게 하면 끝난다

import styled from 'styled-components';
import Select from 'react-select'

const InputFeeField = styled.input`
  ::-webkit-inner-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }
  ::-webkit-outer-spin-button{
  -webkit-appearance: none; 
  margin: 0; 
  }    
`;

const handleInput = (e) => {
  const { value } = e.target;
  if (value.length >= 5) {
    e.preventDefault();
    return;
  }
};

<InputFeeField 
  onKeyPress={handleInput}
  onKeyDown={(e) => ["e", "E", "+", "-"].includes(e.key) && e.preventDefault()}
  placeholder="배달료" 
  type="number" 
/>

preventDefault란?

위의 문제해결에서 사용한 preventDefault 는 뭘까?

preventDefault: 태그의 기본 이벤트 발생을 막는 메서드

preventDefault를 호출하게 되면 브라우저의 코드에 의해 처리되는 기존 동작이 실행되지 않아서 이벤트가 발생하지 않는다

키보드 이벤트

onKeyDown(Keycode) : 사용자가 키를 눌렀을 때

• 키를 입력하면 이벤트 발생 후 문자 입력

onKeyUp(Keycode) : 사용자가 키를 눌렀다가 뗐을 때

• 키를 입력하면 문자 입력 후 이벤트 발생

onKeyPress(ASCII) : 실제로 글자가 입력될 때

• 키를 입력하면 이벤트 발생 후 문자 입력
• onKeyPress는 ASCII값이기 때문에 shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다

이벤트 발생 순서

1. 키보드 누름
2. onKeyDown 이벤트 발생
3. 글자 입력
4. onKeyPress 이벤트 발생
5. 키보드 눌렀다가 뗌
6. onKeyUp 이벤트 발생

참고자료
stackoverflow
stackoverflow
stackoverflow
Event.preventDefault()