文字数カウンター付き textarea
入力した文字数をその場で数え、上限に近づくと色で知らせるテキストエリアです。 input イベントで value.length を読み取り、表示用の数字を更新します。上限の140文字に達したらカウンター文字を赤に変えて、入れすぎを視覚的に伝えます。
解説
入力した文字数をその場で数え、上限に近づくと色で知らせるテキストエリアです。inputイベントでvalue.lengthを読み取り、表示用の数字を更新します。上限の140文字に達したらカウンター文字を赤に変えて、入れすぎを視覚的に伝えます。さらにtextarea自体にmaxlength="140"を付けているので、ブラウザ側でも入力が上限で止まる二重の安心設計です。
活躍する場面
- SNS投稿欄や自己紹介など字数制限のある入力
- お問い合わせやレビューの本文欄
- 見出し・キャッチコピーなど短く収めたいフォーム
上限はmaxlengthとJSの判定値（どちらも140）の両方を同じ数に揃えて変更します。片方だけ変えると、止まる位置と色が変わる位置がずれてしまうので注意してください。日本語では絵文字や一部の文字が見た目1字でも2字分と数えられる場合があるため、厳密な字数管理が必要なら数え方を別途検討します。色やフォーカス時の枠線は:focusと色指定を変えるだけで、サイトの配色に合わせられます。
よくある質問
上限の文字数を変えるにはどこを直しますか。
textarea の maxlength の値と、JS内で色を変える判定に使っている 140 の両方を、同じ数字に揃えて変更します。片方だけ変えると入力が止まる位置と色の変わる位置がずれます。
上限に近づいたときの赤色を別の色にできますか。
できます。JS内で文字色を ef4444 に変えている部分を好きな色コードに置き換えると、警告色を自由に変更できます。