브라우저에서 비밀번호로 인식하게 만들기

기존 프로젝트 디자인 상 비밀번호 입력하는 란이 아래와 같이 4개로 분할되어 있었다. 

 

따라서 이에 맞춰 4개의 input칸을 만들었다.

 

{maskedValues.map((value, index) => (
	<input
		key={index}
		type="password"
		inputMode="numeric"
		maxLength={1}
		value={value}
		onChange={e => handleChange(index, e.target.value)}
		onKeyDown={e => handleKeyDown(index, e)}
	/>
))}

 

이렇게 하다 보니 브라우저 단에서 비밀번호로 인식을 못하여 비밀번호 저장 팝업이 뜨지 않는 문제가 생겼다. 

 

이유는 브라우저는 주로 input 태그에서 type="password"로 설정된 필드를 찾아 비밀번호 필드로 인식하지만 단순히 type="password"만으로는 충분하지 않을 수 있다는 것..

 

input 필드에 autocomplete="current-password" 속성을 추가해보았다. 

** autocomplete 속성은 HTML 폼에서 입력 필드에 자동 완성을 지원하기 위한 속성

 

• utocomplete="current-password": 현재 비밀번호 입력 필드에 자동 완성

하지만 추가해도 브라우저에 자동 저장이 되지 않았다. 

 

이유는 비밀번호를 4개의 input 필드로 나누어 입력하도록 구성했기 때문에 브라우저가 이를 비밀번호 입력 필드로 인식하지 못할 수도 있다는 것,,

 

따라서 보이는 input을 따로 두고 실제 값은 하나의 input에 저장되게끔 해주었다. 

 

{getMaskedValues().map((value, index) => (
	<div key={index} className="password__input-wrapper">
		<input
			type="password"
			value={value ? '*' : ''}
			readOnly
			className="password__input"
			onFocus={() => inputRef.current?.focus()} // 클릭 시 실제 입력 필드로 포커스 이동
		/>
		{/* 가짜 커서를 표시하기 위한 div */}
		{password.length === index && <div className="cursor" />}
	</div>
)}
{/* 실제로 입력을 받는 숨겨진 input */}
<input
	type="password"
	autoComplete="current-password" 
	inputMode="numeric"
	maxLength={4}
	value={password}
	onChange={handleChange}
	onKeyDown={handleKeyDown}
	ref={inputRef}
	style={{ opacity: 0 }}
/>

 

커서가 생기지 않아 커서처럼 보이는 div를 따로 만들어 주었다. 

 

이렇게 하니 브라우저가 비밀번호로 인식을 하기 시작했다!! 

 

wow!!