JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<form name="myform">
    <input type="text" name="cardcode" placeholder="XXXX XXXX XXXX XXXX">
</form>

JavaScript

var cc = myform.cardcode;
for (var i in ['input', 'change', 'blur', 'keyup']) {
    cc.addEventListener('input', formatCardCode, false);
}
function formatCardCode() {
    var cardCode = this.value.replace(/[^\d]/g, '').substring(0,16);
    cardCode = cardCode != '' ? cardCode.match(/.{1,4}/g).join(' ') : '';
    this.value = cardCode;
}