input type number에서 한글입력 방지
JavaScript 2022. 6. 17. 18:39

폼에서 한 Input에서 데이터가 넘어오질 않아 확인해달라는 요청이 들어왔다. 확인을 해보니 문제는 type이 number인 input에서 한글이 입력되었을때 빈 값을 리턴하는것이였다. 먼저 정규표현식으로 입력값을 숫자만 남기고 제거하는 방법을 사용하려고 했는데, 아무리 해도 undefined값이 리턴되었다. e.target.value를 확인한 결과 한글이 입력되는순간 빈값으로 변경되었고 정규표현식을 사용하려해도 사용할수 없는 상황이였다. Type을 text로 설정해 정규표현식으로 숫자만 남기는식으로 하고 싶었지만 모바일에서 숫자 키패드가 나와야 하는 상황이라 text를 사용할수 없었고, 이벤트 객체 안에 사용할만한 다른놈이 있나 콘솔을 찍어봤다. 흔히 사용하는 target.value와 currentTa..

useRef , input 컨트롤, 커서 위치 이동 with antd
ReactJS 2021. 8. 10. 21:08

React에서는 useRef를 이용해 특정 DOM을 선택할 수 있습니다. useRef에 대해서는.... 검색하면 많은 자료가 나오니 패스합니다. input에 기본 값을 주고 포커스 되었을 때 커서를 가장 뒤로 보내주기 위해 useRef를 사용하였고, 그 과정을 소개하고자 합니다. 먼저 antd의 input 태그를 사용하였으며, focus 안에 있는 cursor 객체는 antd에서만 되는듯 했다. 일반 input태그에서는 확인해보지 못했습니다.. 만약 일반 input에서 저게 안된다면 useRef.current로 console.log 찍어 보시면 해당 input의 value를 받아 올 수 있습니 다. 그 value의 length값을 가지고 useRef.current 안에 있는 selectionStart ,..