JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<script src="https://raw.githubusercontent.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<h3>no mask</h3>
<input id="credit-card" placeholder="creditcard number"/>

<h3>mask on keydown</h3>
<input id="credit-card2" placeholder="creditcard number"/>

<h3>mask on focus</h3>
<input id="credit-card3" placeholder="creditcard number"/>

JavaScript

$("#credit-card").inputmask({
  'mask': '9999 9999 9999 9999 999',
  'placeholder': ' ',
  'showMaskOnHover': false,
  'showMaskOnFocus': false
});

$("#credit-card2").inputmask({
  'mask': '9999 9999 9999 9999 999',
  'showMaskOnHover': false,
  'showMaskOnFocus': false
});

$("#credit-card3").inputmask({
  'mask': '9999 9999 9999 9999 999',
  'showMaskOnHover': false
});