프로그래밍언어/Html & Css

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

D.Y 2019. 1. 8. 16:25
반응형


안녕하세요. 

오늘은 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;    
    }
}

결과






반응형