JSFiddle - React, Tailwind, and code Playground

HTML

<div>
D = keyDown, I = Input, C = position after Change, U = keyUp
</div>
<label>Type<br />
    <input type="text" name="textBox" id="textBox" />
</label>
<div id="output"></div>

CSS

label, input{
  font-size:24px;
}
div{
  font-size:12px;
}

JavaScript

var outelm = document.getElementById("output");
var textBox = document.getElementById("textBox");
var caret = 0;
textBox.addEventListener("keydown", function(){
	outelm.innerHTML = outelm.innerHTML + "<br />D: " + this.selectionStart;
  caret = this.selectionStart;
});
textBox.addEventListener("input", function(){
	outelm.innerHTML = outelm.innerHTML + " | I: " + this.selectionStart;
  caret ++;
  if (this.value.length === 4){
      this.value = this.value.substring(0, 3) + "-" + this.value.substring(3);
  	  caret ++;
  }
  this.setSelectionRange(caret, caret);
	outelm.innerHTML = outelm.innerHTML + " | C: " + this.selectionStart;
});
textBox.addEventListener("keyup", function(){
	outelm.innerHTML = outelm.innerHTML + " | U: " + this.selectionStart;

});