テキストエリアの幅を拡大・縮小

やりたいこと：

テキストエリア幅の拡大・縮小を、改行後も行えるようにしたい。

概要：

・要素の上でダブルクリックをするとテキストエリアが作成される。
・テキストエリアを親要素の右端に近い部分で作成する。
・テキストエリアの中に何でもいいので文字を入力
・文字数に応じてテキストエリアは横に伸びるし縮小もするが、親要素の端まで文字を入力すると文字が改行される。
・その後はテキストエリア幅は固定されるので、文字を削除してテキストエリア内を空にしても幅の拡大・縮小は起きない。

親要素の端までテキストエリアが伸びると自動的に改行になるが、一度テキストエリア幅が伸びて改行してしまうと、
テキストエリアの拡大・縮小が行われなくなってしまう。
仮にこの状態でテキストエリアの文字を削除して空にしても、最初に作成したテキストエリアよりも幅が拡大したままなので、
文字を削除したときにも拡大・縮小が行えるようにしたい。

試してみたこと：

if文を使用して条件分布を行っており、テキストエリア幅が親要素の右端を超えた時に改行を行うようにしている。
下記コードだと一度elseの条件に入ってしまうと、文字を削除してもテキストエリア幅の拡大・縮小は行われない。

ならば、else文も同様にテキストエリア幅の拡大・縮小を行う為にコードを記述してみた。
else {
t.style.whiteSpace = 'normal';
t.style.width = 'auto';
t.style.width = (t.scrollWidth) + 'px';

確かに改行後もテキストエリア幅の拡大・縮小はできるが、これだと条件式を行ったり来たりしてしまう。
t.scrollWidthによりテキストエリア幅が常に変化する為、毎回親要素の右端を超えた時の条件分布を発生してしまう。

条件式によるのかもしれませんが、
else文に入った後でも、文字を削除しても文字数に合わせたテキストエリア幅の拡大・縮小を行えるようにするにはどうすればよいか、
ご教示願います。

全体ソースコード：

https://codepen.io/mio-rei/pen/LYWzJqq

ソースコード：

CSS
1textarea {
2    position: absolute;
3    overflow: hidden;
4}

JavaScript
1element.oninput = (e) => {
2        let t = e.target;
3        if (t.nodeName != 'TEXTAREA') return;    
4        if (element.clientWidth - (t.getBoundingClientRect().left - cRect().left) - 0.5 >= t.scrollWidth) {    
5        t.style.width = 'auto';
6        t.style.whiteSpace = 'nowrap'; 
7        t.style.width = (t.scrollWidth) + 'px';
8         }
9
10        else {
11            console.log('規定値を超えました');
12            t.style.whiteSpace = 'normal';
13            t.style.width = element.clientWidth - (t.getBoundingClientRect().left - cRect().left) + 'px';
14        }  
15        
16        t.style.height = "auto";
17        t.style.height = (t.scrollHeight) + 'px'; 
18    }

行動規範の内容に同意します

回答1件

ベストアンサー

これが最適な方法かはちょっと保証できないのですが、おそらくやりたいであろう動作は出来ているように思えます。
実際のテキストエリアとは別にダミーのテキストエリアを作っておき、ダミーに対してテキストや幅を移植してそれと比較して本当のテキストエリアの幅を調整しています。

やりたいことと違ったらコメント下さい。

追加したソースコード

html
1  <!--  監視対象のダミーテキストエリアをおいておく  -->
2  <textarea placeholder="" id='dummy'></textarea>

css
1/*　追加ここから */
2#dummy {
3  position: fixed;
4  white-space: nowrap;
5  width: 0;
6  /* visibility:hidden */
7  /* 実際はhiddenを有効にしてください */
8}
9/* ここまで */

javascript
1const dummyElement = document.querySelector("#dummy");
2const minWidth = 160;
3let observeElement = null;
4let isDummyobserve = false;
5
6const observer = new MutationObserver(() => {
7  if (isDummyobserve) {
8    // ダミーの幅をセット（その前の幅は必ず0にしているので、scrollWidthがセットされる）
9    dummyElement.style.width = dummyElement.scrollWidth + "px";
10    // ダミーと本当のテキストエリアの幅のうち小さい方を採用
11    // ただし、minWidthよりは大きくする
12    observeElement.style.width =
13      Math.max(
14        Math.min(observeElement.scrollWidth, dummyElement.scrollWidth),
15        minWidth
16      ) + "px";
17  }
18  // リセット
19  isDummyobserve = false;
20  observeElement = null;
21});
22
23// ダミーの幅に対してObserverを追加
24observer.observe(dummy, {
25  attriblutes: true,
26  childList: true,
27  subtree: true,
28  attributeFilter: ["width"]
29});

javascript
1    element.oninput = (e) => {
2      let t = e.target;
3
4      /********** 追加ここから **********/
5      // ダミーテキストエリアに文字を移植
6      dummyElement.textContent = t.value;
7      // 幅を一旦0にする
8      dummyElement.style.width = 0;
9      if (t.value.length == 0) {
10        // 文字がなくなったらテキストエリアも消すようにしています。
11        // 別に消さなくていいなら削除してください
12        t.remove();
13      } else {
14        // observeフラグ等をセット
15        isDummyobserve = true;
16        observeElement = t;
17      }
18      /********** ここまで **********/
19
20      /* ...省略.. */
21}