회원가입 UI에서 비밀번호를 영어로만 작성하게 하는 방법

안녕하세요. 초보 개발자 입니다.

회원가입 UI에서 한글로 비밀번호를 작성하지 못하게 하기 위한 방법을 고민하고 있었습니다.

일반적으로 제가 사용했던 UI들은 모든 입력이 영어로만 처리 되도록 동작하는 것 같은데, 이 기능을 구현하기 위해서 어떻게 접근해야 할 지 궁금합니다.

css로 지원하던 ime-mode는 deprecated 되어 비 선호 방식이라고 하고, 키 코드를 받아서 처리하는 방법도 최선의 방법은 아닌거 같아서 이 외에도 이런저런 방법을 고민하고 구글링해보다가 막막하여 이렇게 질문 올려봅니다.

혹시 일반적으로 어떤식으로 접근하는지 알고 계시다면 공유 부탁드리겠습니다.

input type=password 로 하면 안되는 경우인가요?

input type=password는 사용해 onChange 이벤트를 통해서 value를 가져오는데 결국 한글이 잘 들어와서… 영어와 한글을 모두 허용하는게 좋지 않을 것 같아 영어로만 값을 받아오는 방법이 있는지를 고민중에 있습니다. ;(

강제화하는것도 간단치 않죠. 그래서 password rule 어긋나면 input 밑에 안내하는 방법을 대개 사용하는 것 같아요.

image

1개의 좋아요

Regex 찾아보시면 될거같아요.

/^[a-zA-Z]+$/

윈도우에서는 시도해 보지 않았지만 여러 서비스에서 맥과 윈도우로 로그인 테스트를 해보니 맥에서 input type=password에 입력하면 한글이 입력되는 것 같았습니다… ㅜㅜ
동일한 크롬 브라우저여도 os에 따라 input에 입력되는 value가 다르다는 것을 처음 알게 되었습니다.
조언 해주신 분들 감사합니다!!