テキストエリアの幅を文字数に合わせて自動調整したい

テキストエリア入力内の文字数が増えたらテキストエリアの幅が広がり、
反対に文字数が減ったらテキストエリアの幅が縮小される。

JavaScriptで上記の内容を実行できるようにしたいです。
ですが、調べてみるとテキストエリアの高さを自動調整するというのはたくさん検索できるのですが、
テキストエリアの幅の自動調整となると見つかりません。
Teratail内でも探してみましたがありませんでした。

どなたか教えて頂きたくお願い致します。

int32_t

2021/03/05 07:23

高さの自動調整をする仕組みをそのまま幅に応用すればできそうに思えますが、ためしてみましたか? ためしてみて、問題が起きたらその問題を聞いてみてください。

m.ts10806

2021/03/05 07:29

widthかheightの違いではないでしょうか

m.ts10806

2021/03/05 07:30

ただ、無限に広がることになりえるので、大抵は行にあわせて広がる作りになっているだけではと。改行できるテキストエリアのメリットを消すことになるわけですし

yambejp

2021/03/05 07:55

命題の理論だと、文字が入ってないと幅が0になりませんか？

rei78087487

2021/03/07 00:43

int32.t 様 m.ts10806 様ご存知かもしれませんが、高さの自動調整はautosize.jsというライブラリを現在使用しています。幅もできるかもしれないと応用を試みましたが、問題があるとすればライブラリ自体に幅の自動調整機能は無いかもしれません。前述の通り、他の方法も試みてみましたがわかりません。もし、調べ方も悪いのではという事もありましたら、調べ方も含め色々ご教示頂けたらと思います。 yambe.jp 様文字が入っていなくてもデフォルト値がありますので、ある程度の幅の固定されたテキストエリアになるみたいです。試しに0pxにしてその状態で文字を入力してみましたが、文字数に合わせて幅が広がることはありませんでした。細い状態で縦に文字が入力された状態になります。

think49

2021/03/07 10:09

@m.ts10806 さん一応、手動改行は効くのでtextareaのメリットは残っています。 …が、無限にウインドウサイズが横に広がる(横スクロールバーが延びる)実装が良いとは私も思いません。例えば、teratailの [修正依頼] 欄で同実装を行うと、右端のボックスが永遠に右に逃げていくわけで見るのが大変…というわけでレイアウトに制約が発生します。 textarea要素にあった横スクロールバーをウインドウの横スクロールバーに変換するのはデメリットしかない気がします。

int32_t

2021/03/07 23:39

rei78087487さん、 autosize.jsのソースを読んで、どういう仕組で高さの自動調整をしているのか理解して、それを幅に応用すればよいのです。