JSFiddle - React, Tailwind, and code Playground

https://github.com/nosir/cleave.js/pull/56/

by nosir

HTML

<div>
    <section>
        <input class="input-0"/>
    </section>
</div>

CSS

input {
    display: block;
    outline: none;
    -webkit-appearance: none;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    background-color: #fff;
    line-height: 30px;
    vertical-align: middle;
    height: 33px;
    width: 170px;
    font-size: 14px;
    padding: 0 8px;
}

.input-numeral {
    text-align: right;
}

.right {
    text-align: right;
}

body {
    font-family: sans-serif;
}

p {
    margin: 0;
    padding: 0 0 5px 0;
    font-size: 14px;
    color: #666;
}

section {
    margin-bottom: 10px;
}

JavaScript

/*!
 * cleave.js - 0.4.9
 * https://github.com/nosir/cleave.js
 * Apache License Version 2.0
 *
 * Copyright (C) 2012-2016 Max Huang https://github.com/nosir/
 */
!function(e,t,r){"use strict";var a=function(e,r){var o=this;"string"==typeof e?o.element=t.querySelector(e):o.element="undefined"!=typeof e.length&&e.length>0?e[0]:e,r.initValue=o.element.value,o.properties=a.DefaultProperties.assign({},r),o.init()};a.prototype={init:function(){var e=this,t=e.properties;(t.numeral||t.phone||t.creditCard||t.date||0!==t.blocksLength||t.prefix)&&(t.maxLength=a.Util.getMaxLength(t.blocks),e.onChangeListener=e.onChange.bind(e),e.onKeyDownListener=e.onKeyDown.bind(e),e.element.addEventListener("input",e.onChangeListener),e.element.addEventListener("keydown",e.onKeyDownListener),e.initPhoneFormatter(),e.initDateFormatter(),e.initNumeralFormatter(),e.onInput(t.initValue))},initNumeralFormatter:function(){var e=this,t=e.properties;t.numeral&&(t.numeralFormatter=new a.NumeralFormatter(t.numeralDecimalMark,t.numeralDecimalScale,t.numeralThousandsGroupStyle,t.delimiter))},initDateFormatter:function(){var e=this,t=e.properties;t.date&&(t.dateFormatter=new a.DateFormatter(t.datePattern),t.blocks=t.dateFormatter.getBlocks(),t.blocksLength=t.blocks.length,t.maxLength=a.Util.getMaxLength(t.blocks))},initPhoneFormatter:function(){var t=this,r=t.properties;if(r.phone)try{r.phoneFormatter=new a.PhoneFormatter(new e.Cleave.AsYouTypeFormatter(r.phoneRegionCode),r.delimiter)}catch(o){throw new Error("Please include phone-type-formatter.{country}.js lib")}},onKeyDown:function(e){var t=this,r=t.properties,a=e.which||e.keyCode;return 8===a&&t.element.value.slice(-1)===r.delimiter?void(r.backspace=!0):void(r.backspace=!1)},onChange:function(){this.onInput(this.element.value)},onInput:function(e){var t=this,r=t.properties,o=e,n=a.Util;return!r.numeral&&r.backspace&&e.slice(-1)!==r.delimiter&&(e=n.headStr(e,e.length-1)),r.phone?(r.result=r.phoneFormatter.format(e),void...