JSFiddle - React, Tailwind, and code Playground

HTML

<textarea type="text" id="myinput" rows="10" columns="4"></textarea>

JavaScript

$(document).ready(function(){
    var myinput = $('#myinput');
    var maxLen = 1;
    var sep = '.';
    var sepCount = 0;
    var prevLen = 0;
    myinput.keypress(function(){
       var len = myinput.val().length - sepCount * sep.length;
       console.log('len = ' + len + ', prevLen = ' + prevLen);
       var d = len >= prevLen ? 1 : -1;
       if(d < 0){
         sepCount--;
         len += sep.length;
       }
       if(len && (len % maxLen == 0)){
           var newVal = myinput.val() + sep;
           myinput.val(newVal);
           sepCount += d;
       }
        prevLen = myinput.val().length - sepCount * sep.length;
        console.log('prevLen = ' + prevLen); 
    });
});