jquery-inputmask #

Find similar titles

총 17회 업데이트 됨.

Edit

최초 작성자
mj.lee@insilicogen.com 2023-11-16 08:45:05
최근 업데이트
jmchoi 2023-11-21 22:54:25

Structured data

Category: Programming

inputmask #

inputmask란? #

입력 필드에 사용자가 특정 형식을 지켜서 입력하도록 강제할 수 있는 JavaScript 라이브러리입니다.
이 라이브러리를 사용하면 전화번호, 날짜, 우편번호 등과 같이 다양한 형식의 데이터를 입력받을 때, 일관된 형식을 유지하고 사용자 오류를 방지할 수 있습니다.

inputmask사용법 #

필요한 라이브러리 및 플러그인 필요(하단참고)

<script src="script/jquery-3.6.0.min.js"></script>
<script src="script/jquery.inputmask.min.js"></script>

CDN

jQuery (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js)
jQuery Mask (https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js)

기본 구성

$("#phone").inputmask({
    mask: '999-9999-9999',
    placeholder: ' ', // 999 자리에 원래 _ 가 노출되는데 공백으로 노출됨
    showMaskOnHover: false // default: true, 마우스 오버 했을 때 형식 노출 여부
    showMaskOnFocus: false, // default: true, input 박스 클릭했을 때 형식 노출 여부
});

옵션 예제

// 숫자만 입력 가능
$("#phone").inputmask("numeric");

// 0 이상의 수
$("#phone").inputmask("numeric", {
    autoGroup: true,
    groupSeparator: ",",
    allowMinus: false,
    digits: 2,
    repeat: 12
});

//날짜
$('#date').inputmask('yyyy-mm-dd', {
  placeholder: 'YYYY-MM-DD' // 플레이스홀더 설정
});

//우편번호
$('#zipcode').inputmask('99999', {
  placeholder: '_____'
});

이 밖의 다양한 옵션들을 이용해 입력 필드의 다양한 형식을 규칙적으로 구성할 수 있다.

출처 #

https://igorescobar.github.io/jQuery-Mask-Plugin/