JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<style>
input{
  font-family:'monospace';
}
</style>
<body>
  <input type="text" id="phone" placeholder="123-5678-1234" title="123-5678-1234" input-mask="___-____-____">
  <input type="button" onClick="showValue_phone()" value="Show Value" />
  <input type="text" id="console_phone" />
  <script>
    function InputMask(element) {
      var self = this;

      self.element = element;

      self.mask = element.attributes["input-mask"].nodeValue;

      self.inputBuffer = "";

      self.cursorPosition = 0;

      self.bufferCursorPosition = 0;

      self.dataLength = getDataLength();

      function getDataLength() {
        var ret = 0;

        for (var i = 0; i < self.mask.length; i++) {
          if (self.mask.charAt(i) == "_") {
            ret++;
          }
        }

        return ret;
      }

      self.keyEventHandler = function (obj) {
        obj.preventDefault();

        self.updateBuffer(obj);
        self.manageCursor(obj);
        self.render();
        self.moveCursor();
      }

      self.updateBufferPosition = function () {
        var selectionStart = self.element.selectionStart;
        self.bufferCursorPosition = self.displayPosToBufferPos(selectionStart);
        console.log("self.bufferCursorPosition==" + self.bufferCursorPosition);
      }

      self.onClick = function () {
        self.updateBufferPosition();
      }

      self.updateBuffer = function (obj) {
        if (obj.keyCode == 8) {
          self.inputBuffer = self.inputBuffer.substring(0, self.bufferCursorPosition - 1) + self.inputBuffer.substring(self.bufferCursorPosition);
        }
        else if (obj.keyCode == 46) {
          self.inputBuffer = self.inputBuffer.substring(0, self.bufferCursorPosition) + self.inputBuffer.substring(self.bufferCursorPosition + 1);
        }
        else if (obj.keyCode >= 37 && obj.keyCode <= 40) {
          //do nothing on cursor keys.
        }
        else {
          var selectionStart = self.element.selectionStart;
         ...