JSFiddle - React, Tailwind, and code Playground

by rygar

HTML

Mine<br>
<input type="text" size="1" id="num1"></input><br><br>
Yours<br>
<input type="text" size="1" id="num2"></input>

CSS

p { padding:50px; }
        
input { 
    border:1px solid gray;
    padding:6px; 
    font-size:26px;
    font-family:monospace;
    outline:none; 
}

JavaScript

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();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}


function checkLength() {
    var len = $("#num1").val().length;
    setCaretToPos(document.getElementById('num1'),len);
    $("#num1").attr("size", len === 0 ? 1 : len);
}

$("#num1").attr({
    "size": 1,
    "spellcheck": false
}).keydown(function() {
    setTimeout(checkLength, 0);
});

$("#num2").val("").focus().keydown(function(e) {
            
                var len = this.value.length;
 
                switch ( e.keyCode ) {
                case 9: // TAB
                case 13: // ENTER
                case 16: // SHIFT
                case 17: // CTRL
                case 18: // ALT
                case 19: // BREAK
                case 20: // CAPS LOOK
                case 27: // ESC
                case 33: // PAGE UP
                case 34: // PAGE DOWN
                case 35: // END
                case 36: // HOME
                case 37: // ARROW LEFT
                case 38: // ARROW UP
                case 39: // ARROW RIGHT
                case 40: // ARROW DOWN
                case 45: // INSERT
                case 91: // WIN
                case 144: // NUM LOCK 
                    break;
                case 8: // BACKSPACE
                case 46: // DELETE
                    this.size = len <= 1 ? 1 : len - 1;
                    break;
                default:
                    this.size = len === 0 ? 1 : len + 1;                    
                }
                
            }).keyup(function() {
                var len = this.value.length;      ...