😎
textarea大きさ自動変更ごり押し実装
ざっくりとした概要
ページロード時に実行。
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