input mask 사용하기

포맷 : USD  달러인 123,333,22.33 

input text 필드에 금액 입력시  자동으로  포맷형으로 변환해 주기 위하여 jquery plugin  inputmask.js 사용하였다. 

공통인클루드 파일에 js를 임포트 한후  inputmask 객체를 초기화 하였다. 

customInputmask.init(); //input mask 초기화   customInputmask 는 js파일을 만들고 inputmask 객체를 정의하였다. 

var customInputmask = (function() {

 var config = {

  extendDefaults: {

     showMaskOnHover: false,

    showMaskOnFocus: false

},

   extendDefinitions: {},

   extendAliases: {

    'numeric': {

    radixPoint: ".",

       groupSeparator: ",",

       digits: 2,      

       autoGroup: true,

       //prefix: '', 

       rightAlign: false

     },

     'currency': {

      alias: 'numeric',

       radixPoint: ".",

   groupSeparator: ",",

   digits: 2,

   autoGroup: true,

   prefix: ' ', //No Space, this will truncate the first character

   rightAlign: false

     },

    'euro': {

      alias: 'currency',

       prefix: '',

       suffix: ' €',

      radixPoint: ',',

       groupSeparator: '',

       autoGroup: false,

     },

    'euroComplex': {

      alias: 'currency',

       prefix: '',

       suffix: ' €',

     }

   }

 };

var init = function() {

Inputmask.extendDefaults(config.extendDefaults);

   Inputmask.extendDefinitions(config.extendDefinitions);

   Inputmask.extendAliases(config.extendAliases);

   $('[data-inputmask]').inputmask();

};

 

 return {

  init: init

 };

}());

각 화면에서는 input 필드에   data-inputmask="'alias':'numeric'"  구문을 넣어주면 자동으로 알아서 형변환을 해준다. 

참고 사이트 https://git.dei.uc.pt/amoreno/bd/tree/silvia/assets/plugins/jquery-inputmask