JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="ta1">
</textarea>

<textarea id="ta2">
</textarea>

JavaScript

function checkScroll(e){
    if(e.target.clientHeight<e.target.scrollHeight){
        alert('to much text');
    }
};

function restrictScroll(e){
    if(e.target.clientHeight<e.target.scrollHeight){
        while(e.target.clientHeight<e.target.scrollHeight){
            e.target.value = e.target.value.substring(0, e.target.value.length-1);
        }
    }
};

document.getElementById("ta1").addEventListener('keyup', checkScroll);
document.getElementById("ta2").addEventListener('keyup', restrictScroll);