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, 한/영 등의 키를 인식하지 못한다
이벤트 발생 순서
- 키보드 누름
- onKeyDown 이벤트 발생
- 글자 입력
- onKeyPress 이벤트 발생
- 키보드 눌렀다가 뗌
- onKeyUp 이벤트 발생
참고자료
stackoverflow
stackoverflow
stackoverflow
Event.preventDefault()
Author And Source
이 문제에 관하여(styled-components Input 숫자 입력), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@support/styled-components-Input-숫자-입력-jbskjgya저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)