JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="test1"></textarea>
<textarea id="test2"></textarea>

CSS

textarea {position: absolute; height: 100px; width: 300px; top: 100px; left: 30px;}
#test1 {background: rgba(0,0,0,0); color: red;}
#test2 {background: rgba(0,0,0,0); color: #000;}

JavaScript

$('#test2').on({
    focus: function() {
        
        if (this.value.length >= 20) $('#test1').focus();
    },
    keyup: function() {
        if (this.value.length >= 20) $('#test1').focus();
        $('#test1').val(this.value)
    }
})