テキストエリア幅に応じて、一行の文字数が何文字打てるか把握できるようにしたい

Question

やりたいこと：

テキストエリアの幅が200だった場合。
テキストエリアの左端から右端までに打てる『一行分の文字数』は何文字打てるかわかるようにしたい(テキストエリア全体の文字数ではなく一行分)
テキストエリアのサイズ変更に応じて一行分の文字数は変化するのでそれがわかるようにしたい。

調べてみたこと：

参考として、１０文字ごとに改行を行うというものです。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13227112788

これとは反対に、あらかじめ文字数が固定されているのではなく、テキストエリア幅を基準にして一行分が何文字打てるかというものわかるようにしたいです。

テキストエリアの全体文字数を把握する場合は、前回の質問内容のように条件式を使用して、lengthで文字数を取得するという方法ができましたが、一行分の最大文字数となると見当がつきません。

前回の質問内容：テキストエリアの文字数制限を行う
https://teratail.com/questions/349826

何卒ご教示頂きたくお願い致します。

Comments

[m.ts10806]

完全に制御するのは無理では？
フォントによっても違いますし、フロント側なのでプログラム上の指定は無視してcssもフォントもかえることができます。
仕様と考え方変えた方が良いと思います。

Answer 1

等幅フォント

等幅フォントであれば、下記プロパティを Window.getComputedStyle() で参照すれば、計算可能だと思います。

• border - CSS: カスケーディングスタイルシート | MDN
• padding - CSS: カスケーディングスタイルシート | MDN
• letter-spacing - CSS: カスケーディングスタイルシート | MDN
• word-spacing - CSS: カスケーディングスタイルシート | MDN
• font-size - CSS: カスケーディングスタイルシート | MDN

※綿密に仕様を確認してはいないので、ご自身でも下記仕様も確認して足りない部分を補完してください。

• CSS Text Module Level 3 （日本語訳）
• CSS Box Model Module Level 4 （日本語訳）

プロポーショナルフォント

プロポーショナルフォントはフォント幅が文字依存/フォント依存なので、文字数から幅を計算できません。
この場合は、textarea要素と同等の幅を持つ要素を生成して比較する方法が考えられます。

1. <span display: inline-block"></span> の要素ノードspanを生成する
2. 上述の等幅フォントで参照しているプロパティ全てをspan要素ノードにコピー
3. textarea要素に新しい文字が入力される度に span.textContent = textarea.value を実行
4. span要素ノードの幅を参照

Re: rei78087487 さん

Answer 2

まずは「textaera の1行に収まる文字数を求めたい」という問題になりますが、
条件をもっと限定しないと、無理です。

フォントが等幅ではない場合はまったく無理ですし、フォントを等幅に限定できたとしてもどの文字が半角幅でどの文字が全角幅なのかは描画してみるまでわかりません。