テキストエリアに文字を入力する際、親要素最下部(右端)まで入力したら文字数を制限して入力できなくする

Question

やりたいこと：

幅と高さが文字数に応じて変動するテキストエリアに、親要素最下部(右端)まで入力したら文字数を制限して入力できなくする

概要：

・ダブルクリックでテキストエリアを作成。
・テキストエリアの幅と高さは文字数に応じて拡大・縮小する(テキストエリア幅については前述の質問内容になります)
・テキストエリア幅は親要素を超えようとすると自動的に折り返します。

テキストエリアの高さが親要素の最下部(右端)まで到達した時に文字数を制限できるようにしたいです。
アラートではなく、それ以降の文字が打てなくなるようにしたいです。

参考資料：

https://teratail.com/questions/207630?link=qa_related_sp
https://joyplot.com/documents/textarea-%E5%85%A5%E5%8A%9B%E8%A1%8C%E6%95%B0%E5%88%B6%E9%99%90/

様々調べてみたのですが、参考の資料はあらかじめ最大文字数が決まって文字数を制限するようになっています。

今回の条件は、
・文字入力の際、テキストエリアの高さが親要素の最下部まで来た時
・その際にテキストエリア内の最大文字数が何文字か

２番目の条件は、テキストエリアの作成位置、幅や高さが変動する為に毎回最大文字数が変わります。
なので、あらかじめ文字数が何文字まで入力できるかわかりません。
この２つの条件を元に入力制限ができると考えているのですが…

お手数ですが何卒教えて頂きたくお願い致します。

全体ソースコード：

https://codepen.io/k4a/pen/JjNEjOE?editors=1111
※前述の質問にて回答者様より頂いた引用になります。

ソースコード：

※あくまで引用を元に作成してるので、全体ソースコードと若干異なります。

 element.oninput = (e) => {
        let t = e.target;
        dummyElement.textContent = t.value;
        dummyElement.style.width = 0;
        if (t.value.length > 0) {
            isDummyobserve = true;
            observeElement = t;
        } 

        if (t.nodeName != 'TEXTAREA') return;
     
        const widthBoundary = element.clientWidth - (t.getBoundingClientRect().left - cRect().left);
        if (widthBoundary > t.scrollWidth + 16) {
            t.style.width = 'auto';
            t.style.whiteSpace = 'nowrap'; 
            t.style.width = (t.scrollWidth) + 'px';
        } else {
            console.log('規定値を超えました');
            t.style.whiteSpace = 'normal';
            t.style.width = widthBoundary + 'px';
            console.log(t.style.width);
            console.log(t.value.length);
    
        }  
        
        
        if (element.clientHeight - (t.getBoundingClientRect().top - cRect().top) > t.scrollHeight &&
            t.value > max.length) {
            console.log('test'); 
            t.style.height = "auto";
            t.style.height = (t.scrollHeight) + 'px'; 

        } else {
            console.log('入力不可');
            t.value = '';
        }

Answer 1

今回の問題としている箇所は、
・文字入力の際、テキストエリアの高さが親要素の最下部まで来た時
・その際にテキストエリア内の最大文字数が何文字か

特に２番目の文字数の取得が問題となっている。

一番目の箇所は、
＞ポイント
if (element.clientHeight - (t.getBoundingClientRect().top - cRect().top) > t.scrollHeight)
とすることで、テキストエリアの幅が親要素の最下部に到達するまで処理を行う。

２番目の箇所として
＞ポイント
test.propaty = t.value.length;
ここが特に大きなポイント。
testオブジェクトにpropatyプロパティを作成。そのプロパティの中にt.value.lengthを格納する
t.value.lengthは現在のテキストエリアの文字数を取得できる。

これを行う事で、テキストリアが親要素の最下部まで来た時の最大文字数を取得する。
このpropathプロパティをsubstrメソッドで使用することで、入力制限をかけることができる。
t.value = t.value.substr(0, test.propaty);

肝となるのはプロパティにlengthの値を入れること。
if分に変数を使用すれば同じことが出来ると思うが、それだとスコープの問題によりできない。
if文で書いたtest.propaty = t.value.length;が仮に、
const test = t.value.lenghtと書いてelseで使用しても違うブロック(ローカル)スコープなので、
elseに変数testを使用する事ができない。
なのでプロパティに値を入れる事で、else文にもproptaty(t.value.length)の値を使用する事ができる。

もうひとつの疑問として、lengthプロパティは毎回文字を入力するたびに文字数の取得が変化するから、最下部のところまで来た時の文字数はわからないと思ったが、
あくまでその値はif分の条件式、
if (element.clientHeight - (t.getBoundingClientRect().top - cRect().top) > t.scrollHeight)
テキストエリアの幅が親要素の最下部に到達するまで処理を行う

までの値をプロパティに入れているのでlengthの値は随時更新されるが、プロパティに入っている値はあくまでも上記if分条件式までの値になる。

これを行う事でテキストリアエリアが親要素の最下部(右端)まできた時に入力制限をかけることができる。

全体ソースコード：
https://codepen.io/mio-rei/pen/YzVQZbL

const test = {};

element.oninput = (e) => {
      ～～～～～～～～～～～～～～省略
        if (element.clientHeight - (t.getBoundingClientRect().top - cRect().top) > t.scrollHeight) {
            test.propaty = t.value.length;
            t.style.height = "auto";
            t.style.height = (t.scrollHeight) + 'px'; 

        } else if (t.value.length > test.propaty) {
           console.log('入力不可');
           t.value = t.value.substr(0, test.propaty);
        }
    }

Comments

[rei78087487]

訂正：
上記内容にて、プロパティを使用した最大文字数の取得を記載しましたが、一点誤りがありましたので訂正します。
プロパティで最大文字数を取得する事で、elseブロックに取得した内容が引き継がれる　→誤
グローバル変数を使用した方法で最大文字数が取得できる　→正
単順に変数をグローバルで作成してから、ローカル内で値を取得すればelseブロックでも使用出来ます。
お手数おかけしました。