[React] input 태그에 숫자만 입력되게 / input number 버튼 없애기

1 input 태그에 숫자만 입력되게

 <InputArea
	placeholder="8자리 ex)20001231"
	type="number"
	value={birth}
	onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
		if (birth.length > 8 && e.key !== "Backspace") {
			e.preventDefault();
		}
	}}
	onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
		const { value } = e.target;
		const onlyNum = value.replace(/[^0-9]/g, "");
		setBirth(onlyNum);
	}}
/>

input창에 숫자만 입력되게 하려면,

정규식을 이용하여 숫자가 아닌 것들은 ''으로 바꾸어버리면 된다.

 

그런데 당황스럽게도 이 방법을 사용하니 maxLenght가 적용이 안되는 것이다 💦

그래서 onKeyDown을 이용하여 value가 8자리 이상일 땐 '뒤로가기' 외의 키는 안먹히도록 따로 처리를 하엿다

 

 

---

 

 

2 input number 버튼 없애기

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

 

해당 코드를 이용하면 된다 ~