input type number를 비밀번호로 표시하기

문제

HTML input type 속성은 하나의 타입만 허용한다. number냐, password냐 둘 중 하나를 골라야 한다. 그런데 숫자만 입력 받고, 모바일에서 숫자 키패드가 뜨고, 비밀번호로 표시하고 싶다면?

CSS 비표준 스타일을 추가해준다.

예제

코드

HTML

<input type="number" inputmode="numeric" class="input-number-password"/>

CSS

.input-number-password {
    -webkit-text-security: disc;
}

설명

• type="number" 숫자 인풋이다.
• inputmode="numeric" 모바일 디바이스에서 일반 키패드 대신 숫자 키패드를 띄운다.
• class="input-number-password" 웹킷 힌트를 준 클래스를 적용하였다.

-webkit-text-security 값으로는 disc 말고도 square나 circle 등이 올 수 있으나, disc가 가장 일반적인 패스워드 표시형식이다. (검게 칠한 동그라미)

inputmode에 대해 자세히 알고 싶다면 클릭