html Input type password, tel 두 가지 사용하는 방법

안녕하세요. 

오늘은 html Input 태그 type password, tel 두 가지 사용하는 방법에 대해서 알아보겠습니다.

상황에 따라서 input 태그의 타입을 password와 tel(또는 number)과 같이 두 가지를 사용하고 싶을때가 있다.

예를들어, 주민등록번호 뒷자리를 입력받는다고 할때 password가 노출되지 않도록 하면서 사용자에게 숫자 키패드를 보여주고 싶은 경우가 있다.

이때, 해결할 수 있는 방법은 여러가지가 있다.

1. input 태그를 2개 만들어서 처리하는 방법
2. -webkit-text-security 속성을 사용하여 처리하는 방법

이 글에서는 -webkit-text-security 속성을 사용하여 해결 해보도록 하겠습니다.

input 태그에서 type을 password와 tel 두 가지 사용이 가능한가?

• type에 중복으로 사용은 불가능하다.
• 그러나, 두 가지를 사용한 것 처럼 나타낼 수 있다.

해결방법

• input 태그의 type은 tel로 설정하고, css의 -webkit-text-security 속성을 사용하여 암호가 노출되지 않도록 처리합니다.
• -webkit-text-security 속성은 form 필드 (ex. input, textarea 등)의 문자를 모양으로 바꾸어 처리하는 비표준 CSS 속성입니다.

예제 코드

• MobilePage.tsx

import * as React from 'react';

import './MobilePage.scss';

export class MobilePage extends React.Component
{
    public render(): JSX.Element
    {
        return (
            <div className="mobile-page-container">
                <input id="password-input"
                    type="tel" 
                    placeholder="숫자로 된 비밀번호 입력"
                    style={{border: "1px solid", height: 35, fontSize: 18}}/>
            </div>
        )
    }
}

• MobilePage.scss

.mobile-page-container {
    
    #password-input {
        -webkit-text-security: square;    
    }
}

결과

참조

• Make Input Type="Password" Use Number Pad on Mobile Devices

• https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security