JSFiddle - React, Tailwind, and code Playground

by emanuelbsilva

HTML

<input type="text" />

JavaScript

var lastValue = ""
var caret = 0;
var triggerEvent = false;
$('u_u_i_d_04ab3774-709d-4a01-8bfb-3ab6b3588b70-input').on('input', function() {
  var val = $(this).val();
  if(triggerEvent){
    triggerEvent = false;
   return false
  }
  if (lastValue.length > val.length) return
    if (val.length == 1 || (val.length == 5) || (val.length == 9)) $(this).val(val + '-');
  if (val.length == 2 || (val.length == 6) || (val.length == 10)) $(this).val(lastValue + '-' + val.substr(-1));
  else if (val.length >= 13) {
  	$(this).val(val.substr(0, 13));
    triggerEvent = true;
    $(this).trigger('input')
  }
});
$('u_u_i_d_04ab3774-709d-4a01-8bfb-3ab6b3588b70-input').on('keydown', function(event) {
  lastValue = $(this).val();
  caret = event.target.selectionStart;
});