TadaoYamaoka https://blog.hatena.ne.jp/TadaoYamaoka/ TadaoYamaokaの開発日記 https://tadaoyamaoka.hatenablog.com/ React TailwindCSS ほぼ個人メモ。HTMLのtextareaは、入力に応じて高さを自動で調整する機能がない。 ChatGPTの入力欄のように、高さが自動で変わるテキストエリアを作るには、CSSとJavaScriptで実装する必要がある。JavaScriptで高さを計算するのはややこしいので、非表示のdivタグに内容をコピーして、そのタグの高さにflexのrelativeとabsoluteを使って合わせる方法がある。 The Cleanest Trick for Autogrowing Textareas | CSS-Tricks - CSS-Tricksこのサンプルでは、Alpine.jsを使っていたので、Rea… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftadaoyamaoka.hatenablog.com%2Fentry%2F2023%2F06%2F06%2F234743" title="React+TailwindCSSで高さ可変のテキストエリアを作る - TadaoYamaokaの開発日記" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2023-06-06 23:47:43 rich https://tadaoyamaoka.hatenablog.com/entry/2023/06/06/234743 1.0 100%