숫자만입력 (2) 썸네일형 리스트형 [JavaScript] iOS, input type="number"일 때 숫자 키패드 띄우기 모바일 대응을 하다보면 만나는 문제, 안드로이드와 iOS... 안드로이드는 input 태그의 type 속성에 number 지정을 해주면 숫자 키패드가 자동으로 잘 나타난다. 반면에, iOS는... ^^ type="number" 임에도 불구하고 일반적인 한/영 키보드가 나와 한글, 영문은 물론 특수문자까지 입력이 가능하다. 그렇다면, 어떻게 숫자 키패드가 나오게 할 수 있을까? 방법은 매우 간단했다! input 태그의 inputmode 속성을 지정해주면 끝 - decimal은 '.'도 입력할 수 있는 숫자 키패드를 제공하고, numeric은 정말 순수한 숫자 키패드를 제공하니 용도에 맞게 선택하면 된다! 다만, 이는 최신 iOS에서만 동작이 되는 듯하니, 최신 버전 외에도 지원을 한다면 pattern 속성.. [JavaScript] input type="number" 숫자만 입력되도록 설정하기 input의 type 속성을 number로 지정하여 한글 입력을 막았지만, +, -, . 의 기호가 입력되어 당황스러웠다면 드루와~ 물론, 내 이야기다! 숫자 외 기호 등의 입력을 방지하는 방법은 정규 표현식을 활용할 수도 있지만, 내 경우에는 정규 표현식으로 잘 방어가 되지 않았기 때문에 다른 방법을 소개하려고 한다. 키보드 이벤트로 해당 기호 입력을 방지하는 방법인데, 바로 코드를 보자! (참고로 React 사용중..) const AgeInput = () => { const handleKeyDown = useCallback((event) => { if (event.key === '-' || event.key === '+' || event.key === '.') event.preventDefault().. 이전 1 다음
