JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <input type="text" name="input" maxlength="10">
</form>

JavaScript

$("form input").val("-".repeat(10));
$("form").on('keypress, keydown', 'input', function(event) {
    // Replaces the "-" while user input.
    var index = this.selectionStart;
    if (event.keyCode >= 48 && event.keyCode <= 57) {
      $(this).val($(this).val().substring(0, index) + 
                  $(this).val().substring(index + 1, $(this).val().length));
      setCaretToPos(this, index);
    } 
    // Adds "-" at the current position for "Backspace."
    if (event.keyCode == 8) {
      $(this).val($(this).val().substring(0, index) + '-' +
                  $(this).val().substring(index, $(this).val().length));
      setCaretToPos(this, index);
    } 
    // Adds "-" at the current position for "Delete."
    if (event.keyCode == 46) {
      $(this).val($(this).val().substring(0, index) + '-' +
                  $(this).val().substring(index + 1, $(this).val().length));
      setCaretToPos(this, index);
      return false;
    }
});

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  } else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

// Sets caret position.
function setCaretToPos(input, pos) {
  setSelectionRange(input, pos, pos);
}