input password에서 1~2글자가 한글로 바뀌는 이슈: ime & inputMode

login을 위해서, 같은 form 안에 아래와 같이 input을 구성했다. 

 

return (
	<form onSubmit={_onSubmit}>
    		<input name='id' ... />
        	<input name='password' type='password' ... />
	</form>
)

 

id input에서 tab을 통해 이동하면, 찰나에 OS ime가 잠깐 한글로 바뀌었다가 영어로 바뀌는 케이스가 있다.(테스트 환경: macOS)

이걸 위해서는 정말 간단하게 하나 추가해주면 된다.

그것은 바로 ...

inputMode='text'

return (
	<form onSubmit={_onSubmit}>
    		<input name='id' ... />
        	<input name='password' type='password' inputMode='text' ... />
	</form>
)

 

inputmode="text"의 동작 원리

• 목적: 브라우저나 운영체제에 "텍스트 입력이 필요하다"는 메세지를 전달하기 위함
• IME(입력기) 상태: inputmode="text"를 사용하더라도 IME는 기존 상태를 유지합니다.
  • 만약 한글 IME가 활성화된 상태라면 한글이 입력됩니다.
  • 영어 상태라면 영어가 입력됩니다.

inputmode 값에 따른 동작 예시

inputmode 값	키보드 동작 (모바일 기준)	IME 영향
none	키보드가 아예 나타나지 않음	IME 영향 없음
text	일반 텍스트 키보드 (기본값)	IME 상태 유지
numeric	숫자 전용 키패드	IME 비활성화
tel	전화번호 키패드 (숫자 및 기호 제공)	IME 비활성화
email	이메일 입력에 최적화된 키보드	IME 상태 유지
url	URL 입력에 최적화된 키보드	IME 상태 유지

 

 

 

좀 더 자세한 이유는 아래로 ...

- https://run-a-way.tistory.com/70

[Unity] password input field 에 대한 고찰 (IME 사용법)