Monday 8 March 2021

jQuery mask for different card types

I have a credit card input, and its mask should dynamically change after input change events (e.g. its default mask is "9999 9999 9999 9999", but for "37" it should change to AMEX format "9999 999999 99999").

When I'm typing is fine, but when I copy/paste it doesn't format correctly.

$('input').on('input', function (e) {
  var value = $(this).inputmask('unmaskedvalue');

    $('input').inputmask({
      mask: (value.substr(0,2) === '37' || value.substr(0,2) === '34') ? '9999 999999 99999' : '9999 9999 9999 9999'
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script>

<input>

<p>
Try switching between the these two (paste first, then second then first again):
</p>
<ul>
  <li>5100000000404390</li>
  <li>370000000024291</li>
</ul>

Any idea where can be wrong?



from jQuery mask for different card types

No comments:

Post a Comment