document.readyState === 'complete' ? init() : window.onload = init;

//

function init() {

  let theSSN = new wijmo.input.InputMask('#theSSN', {

    mask: '000-00-0000',

    placeholder: 'SSN',

    isRequired: false,

    value: '',

    valueChanged: validateMask,

    lostFocus: lostFocus

  });

  //

  let theZip = new wijmo.input.InputMask('#theZip', {

    mask: '00000',

    placeholder: 'Zip Code',

    isRequired: false,

    value: '',

    valueChanged: validateMask,

    lostFocus: lostFocus

  });

  //

  let theZip4 = new wijmo.input.InputMask('#theZip4', {

    mask: '00000-0000',

    placeholder: 'Zip Code + 4',

    isRequired: false,

    value: '',

    valueChanged: validateMask,

    lostFocus: lostFocus

  });

  //

  let thePhone = new wijmo.input.InputMask('#thePhone', {

    mask: '(999) 000-0000',

    placeholder: 'Phone Number',

    isRequired: false,

    value: '',

    valueChanged: validateMask,

    lostFocus: lostFocus

  });

  //

  // 'state-invalid' 클래스 업데이트

  function validateMask(sender) {

    wijmo.toggleClass(sender.hostElement, 'state-invalid', !sender.maskFull);

  }

  //

  // 포커스가 사라질 때 채워지지 않는 마스크 지우기

  var clearIncomplete = document.querySelector('#clearIncomplete');

  function lostFocus(sender) {

    if (!sender.maskFull && !sender.isRequired && clearIncomplete.checked) {

      sender.value = '';

    }

  }

}