テキストエリアの幅を溢れたら折り返して表示する
これのせいでモバイルの使い勝手が非常に悪い
PCでも使いづらい
何か前に参考実装を見た気がするが・・
- https://codepen.io/liborgabrhel/pen/eyzwOx
- scrollHeightを見るっぽい
- https://stackoverflow.com/questions/57965268/possible-to-have-a-dynamically-height-adjusted-textarea-without-constant-reflows
- 同じかな
- https://qiita.com/YoshiyukiKato/items/507b8022e6df5e996a59
- 日本語記事
- 縮む挙動も解説あり
> code javascript
~~(e.target.scrollHeight / this.textLineHeight)
<<
えっと、これはなんだ
- textLineHeightは1行の高さ
- scrollHeightは実際のコンテンツの中身かな
- これでtextareaの中に入っているテキストの高さが取れてるっぽい
それっぽく実装できたがまだ問題あり
- 初回に大きさが決まらない
- これが問題
- 意図的にupdateを引き起こせればよいのだが・・
- イベントがなくても取れそうだが、文字が入った後でないといけない
- 対策してみたが、、
- クリックで移動したときに発動しない
- キーボードで移動すると発動する
- 一応直した。パフォーマンス悪くなってそう
- 一度広がると戻らない
- これはそこまで問題ではない
- これを戻すのは難しいの？
- ScrollHeightが一度広がると戻らないからだ
- 2022/12/20 デプロイしてみた