文字に完全にフィットしてサイズが変わるテキストボックスをつくる
調べると縦方向に対しては文字を追加しても削除しても動的に変化するテキストボックスの例はたくさん出てくるが、横方向は削除したときについてこない例しか無い。
element.scrollWidth
とelement.clientWidth
の関係性では、scrollWidth
でのほうが小さくなることは無いからだ。
scrollWidth →内部テキストの幅
clientWidth→要素の幅
Loading...
上のようなcssを当てて内部テキストが要素の幅を超えている場合、scrollWidth > clientWidth
には成り得るが、内部テキストが要素の幅を超えていない場合はscrollWidth < clientWidth
とならずにscrollWidth == clientWidth
となる。
これが最適かはわからないが、ダミーのテキストエリアを作りそれを監視して幅を適用することで解決することが出来た。
Loading...
Loading...
Loading...
Loading...
※これはteratailで回答したものを整理したコードです。