JSFiddle - React, Tailwind, and code Playground

by emanuelbsilva

HTML

<input type="text"/>

JavaScript

var lastValue = ""
var caret = 0;
var triggerChange = false;
$('input').on('input', function(){
	var val = $(this).val();
  
  console.log('input', triggerChange);
  
  if(triggerChange){
  	triggerChange = 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));
      triggerChange = true
	    $(this).trigger('input')
    }
});

$('input').on('keydown', function(event){
	lastValue = $(this).val();
  caret = event.target.selectionStart;
});