JavaScript를 사용하여 플러그인 없이 입력 텍스트 마스킹
- JavaScript에서 신용 카드 번호에 대한 입력 마스킹
- JavaScript의 우편번호 입력 마스킹
- JavaScript에서 괄호 입력 마스킹이 있는 전화 번호
- JavaScript의 다양한 필드에 대한 입력 마스킹 사용자 지정
JavaScript 입력 마스크 또는 마스킹된 텍스트 상자는 사용자가 표준 마스크를 기반으로 입력을 수집할 수 있는 쉽고 안정적인 방법을 제공하는 컨트롤입니다. 예를 들어 전화 번호, 날짜 값, 신용 카드 번호 및 기타 표준 형식 값을 캡처할 수 있습니다.
사용자가 특정 시나리오에서 특정 데이터만 특정 형식으로 입력할 수 있도록 해야 할 수도 있습니다. 예를 들어 우편 번호와 신용 카드 항목은 특정 데이터 형식을 제한할 수 있는 특정 패턴 내에 있습니다.
입력 마스킹 라이브러리를 사용하면 특정 데이터 입력 형식을 사용하여 입력 필드를 마스킹할 수 있습니다.
입력 필드를 마스킹하기 위한 이 JavaScript 모듈은 공백, 대시 및 기타 문자를 자동으로 입력합니다. 따라서 사용자는 숫자나 알파벳 입력에만 집중할 수 있습니다.
이는 웹 인터페이스를 사용하는 데이터 입력 운영자가 많은 항목을 작성해야 할 때 특히 유용합니다.
아래 제공된 예제를 통해 웹 페이지에서 이 라이브러리를 설정하는 방법을 배우게 됩니다.
JavaScript에서 신용 카드 번호에 대한 입력 마스킹
이 예에서는 신용 카드의 일반 형식이 제공됩니다. 사용자는 공백을 입력하지 않고 숫자와 알파벳을 입력할 수 있습니다.
아래 스크린샷과 같이 공백이 자동으로 추가되는 것을 볼 수 있습니다.
아래에서 이 예제의 코드에 액세스할 수 있습니다.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="cc">Credit Card Number</label>
<input id="cc" type="tel" name="ccnum" placeholder ="XXXX XXXX XXXX XXXX" pattern="\d{4} \d{4} \d{4} \d{4}" class="masked" title="Enter the 16 digits of credit card">
</li>
</ul>
<script src="js/maskinginput/maskinginput.js" data-autoinit="true"></script>
</body>
</html>
JavaScript의 우편번호 입력 마스킹
우편 번호는 영숫자의 혼합이므로 입력 마스킹에 대한 흥미로운 사례입니다. 우편번호를 입력하기 위한 자리 표시자는 사용자가 문자가 필요한지 또는 숫자가 필요한지 알 수 있도록 만들어집니다.
아래 스크린샷을 참조하십시오.
자리 표시자에 X를 사용하는 대신 A1B2C3이 사용된 것을 보았으므로 필요한 형식을 알고 있습니다. 또한 공백을 입력할 필요가 없습니다. 올바른 형식으로 코드를 계속 입력하십시오.
우편번호 입력 마스킹 필드를 생성하기 위한 마크업은 다음과 같습니다.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="zipca">Enter zip code</label>
<input id="zipca" type="text" name="zipcode" placeholder="A1B2C3" pattern="\w\d\w\d\w\d" class="masked" datacharset="_X_ X_X" title="Enter zip code">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
JavaScript에서 괄호 입력 마스킹이 있는 전화 번호
이 예에서는 전화 필드가 가려지고 스크립트가 괄호를 관리합니다. 이는 아래 스크린샷에 나와 있습니다.
이에 대한 코드는 다음과 같습니다.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="tel">Enter Phone</label>
<input id="tel" type="tel" name="phone number" placeholder="(XXX) XXX-XXXX" pattern="\(\d{3}\) \d{3}\-\d{4}" class="masked" title="Enter number without parenthesis">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
JavaScript의 다양한 필드에 대한 입력 마스킹 사용자 지정
위의 모든 인스턴스에서 주목해야 할 가장 중요한 것은 패턴 정의입니다. 예를 들어 위의 전화 예에서 다음 패턴이 입력 필드에 배치됩니다.
pattern = '\(\d{3}\) \d{3}\-\d{4}'
사용자가 괄호 안에 3자리가 아닌 4자리를 입력하도록 허용하려면 4로 변경합니다. 입력 필드를 사용자 지정하는 방법을 보여주기 위해 다른 대시도 추가하므로 패턴은 다음과 같습니다.
pattern = '\(\d{4}\) \d{3}\--\d{4}'
사용자는 또한 다음과 같이 자리 표시자를 변경해야 합니다.
placeholder = '(XXXX) XXX--XXXX'
이에 대한 스크린샷은 아래와 같습니다.
이에 대한 코드는 다음과 같습니다.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/masking-input/masking-input.css"/>
<style>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="tel">Enter Phone</label>
<input id="tel" type="tel" name="phone number" placeholder="(XXXX) XXX--XXXX" pattern="\(\d{4}\) \d{3}\--\d{4}" class="masked" title="Enter number without parenthesis">
</li>
</ul>
<script src="js/mask-input/mask-input.js" data-autoinit="true"></script>
</body>
</html>
마찬가지로 사용자는 필요한 형식으로 숫자나 문자를 추가하여 변경할 수도 있습니다.