😎

textarea大きさ自動変更ごり押し実装

2025/03/02に公開

ざっくりとした概要

ページロード時に実行。
textareaのすべての要素をコピーしたdiv要素を作成する。
すべて変換される

以下コード


   window.addEventListener('load', function(){
              // すべてのtextareaを取得
      console.log("load:リソースファイルを全て読み込みました。");
      const textareas = document.querySelectorAll('textarea');

        textareas.forEach(textarea => {
        // 新しいdiv要素を作成
        const div = document.createElement('div');
        
        // 属性とスタイルを引き継ぎ
        div.id = textarea.id;
        div.className = textarea.className;
        div.style.cssText = textarea.style.cssText;
        
        // 編集可能に設定
        div.contentEditable = true;
        
        
        // テキスト内容を移植
        div.textContent = textarea.value;

        
        // 元のtextareaを非表示にして隣に挿入
        textarea.style.display = 'none';
        textarea.parentNode.insertBefore(div, textarea.nextSibling);
        });
    });

Discussion