textareaで1行あたりの入力可能文字数を制御して自動改行したい

Question

textareaのcolの設定値を変えると、レイアウトにズレが生じてしまい、その修正がうまくいかなかったことからcolを変えずに1行あたりの入力可能文字数を制御して自動的に改行する方法はないかと模索中です。

onKeyupで文字数を裏で加算していき、指定文字数になったかを判定までは出来るのですが
そこから折り返して次の行に持っていくのがうまくいきません。

どなたかご存知な方はいらっしゃいますでしょうか？

Comments

[kei344]

「レイアウトにズレ」とはtextarea上のことでしょうか。それとも別の出力側のことでしょうか。

Answer 1

<!-- 横５０文字、縦１０行のテキストエリアで、テキストエリア内で自動的に改行する -->
<textarea name="sample" cols="50" rows="10" wrap="soft"></textarea>

というのでは、ダメなのでしょうか？

wrap="hard"にすると、送信される内容に改行が含まれるようになりますから、質問でやろうとしている事に近くなります。

Answer 2

textareaの自動改行はさすがにまずいでしょう。
入力後に修正をする（たとえば文字削除する）と、勝手に入った
改行で余計フォーマットがおかしくなったりする懸念があります
teratailのように、入力欄と表示欄をべつにして表示欄をみて
ユーザーが任意に入力欄を調整するようにしむければよいのでは？