jquery mask는 form 필드나 Html elements의 형태를 표시하기 위한 jquery plugin이다.
유저 데이터를 전화번호나 우편번호와 같이 원하는 형태의 데이터를 모으기 위해서 유용하게 사용할 수 있다.
<HTML>
<p>
<label>Date Example
<input type="text" name="date" />
</label>
</p>
<p>
<label>Postal Code Example
<input type="text" name="postal-code" />
</label>
</p>
<p>
<label>Phone Number Example
<input type="text" name="phone-number" />
</label>
</p>
<JS>
$('input[name="date"]').mask('00/00/0000');
$('input[name="postal-code"]').mask('S0S 0S0');
$('input[name="phone-number"]').mask('(000) 000 0000');
$('input[name="postal-code"]').focusout(function() {
$('input[name="postal-code"]').val( this.value.toUpperCase() );
});
실행 사이트: https://dobsondev.com/2017/04/14/using-jquery-mask-to-mask-form-input/
위에의 예시를 살펴보면, 만약 phone number input란에 "555-555-5555" 타이핑 한다면 "-" 문자를 생략할 것이다(정해진 포맷에 맞게). 또한 포맷에 맞게 입력될 것이다.
주의) 두 가지의 라이브러리를 추가해야 한다.
입력값을 mask 하기위해서 , Jquery selector와 .mask(...) 기능이 필요하거나 HTML data data-mask 속성을 추가하는 것이 필요하다. [위의 예제에서 Jquery selector 사용 - postal 코드와 phone number 코드 // Html data 속성 사용 - SIN 코드 예제 1. Jqeury Selector 사용 $('input[name="date"]').mask('00/00/0000'); 보다시피, input 명을 사용하여 .mask() function을 사용하는 것을 더 선호한다. .mask() function은 규칙적인 표현형식에 맡게 번역할 수 있는 숫자나 문자 형식의 포맷을 취한다.(예: 00/00/0000) .mask(..) function은 이러한 분명한 방법으로 mask을 한다 만약 무언가를 Overwrite하거나 새로운 거를 추가하기 원한다면, 다음처럼 할 수 있다. $('.your-field').mask('00/00/0000', {'translation': {0: {pattern: /[0-9*]/}}}); -유효한 문자열은 0~~~9 그리고 * translation 사용과 custom된 무언가를 정의함으로써 원하는 형태를 할 수 있다. 예제 2. HTML DATA 사용 Jquery selector와 아주 유사하고 오직 input 태그에 mask를 넣는 차이만 있다. mask 플러그인을 사용할 때, 훨씬 깔끔하고 더 쉽게 찾을 수 있기 때문에 빈번하게 사용한다. SIN number 예제를 살펴보면, <input type="text" name="social-insurance" data-mask="000 000 000" /> 특별한 메소드 사용이 전혀 없다. 즉, custom translaction 기능을 사용할 수 없다. 번역: https://dobsondev.com/2017/04/14/using-jquery-mask-to-mask-form-input/
'JAVASCRIPT > JQUERY' 카테고리의 다른 글
| [Jquery] 이벤트 발생 객체 안에서 한정된 선택자 찾기 (0) | 2018.03.08 |
|---|---|
| [Jquery]Ajax 보조 메서드 활용(serialize(),serializeArray(),param()) (0) | 2018.02.22 |
| [Jquery]selector 범위를 한정하는 context - $(selector, context) 사용 (0) | 2018.02.20 |
| [Jquery]Select에서 선택된 option value -Jquery 입력 양식 필터 선택자 (0) | 2018.02.19 |