JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<input type="text" id="title" class="title" maxlength="20"/>
</form>

CSS

#title{ margin:10px;width:300px;height:20px }

JavaScript

$(function(){
    $('#title').on('keyup', function(e) {
        if(e.keyCode == 46){
           return false;
        }
        this.value = (this.value.length<3)?this.value+="day":this.value;
        var caretPos = this.value.length-3;
         if(this.createTextRange) {
            var range = this.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(this.selectionStart) {
                this.focus();
                this.setSelectionRange(caretPos, caretPos);
            }
            else
                this.focus();
        }
    });
});