文字数カウンター付き textarea
文字数カウンター付き textarea は、入力中の文字数と上限を リアルタイムに表示 する入力欄です。 textarea に maxlength="140" を付けて上限自体はブラウザに守らせつつ、JavaScript の input イベントで value.length を読み取り、現在数を画面に反映しています…
解説
文字数カウンター付き textarea は、入力中の文字数と上限をリアルタイムに表示する入力欄です。textarea に maxlength="140" を付けて上限自体はブラウザに守らせつつ、JavaScript の input イベントで value.length を読み取り、現在数を画面に反映しています。上限が近づくと is-near クラスを付けて数字の色を変えるため、ユーザーは「あとどれくらい書けるか」を意識しながら入力できます。
活躍する場面
- 140 文字制限のレビューや感想フォーム
- SNS 投稿のような短文入力欄
- 自由記述に上限を設けたいお問い合わせ
上限を変えるときは maxlength の値と、表示に使っている /140 のテキストを揃えて書き換えます。色が変わり始める閾値も JavaScript 内の数値で調整できます。数字には font-variant-numeric:tabular-nums が指定され、桁が増えても横揺れしません。なお maxlength だけだとコピー貼り付けで超過しても切り詰められるため、カウンター表示があると安心感のある UX になります。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
上限の文字数を変えるにはどこを直しますか？
textarea の maxlength 属性の値と、表示している「/140」のテキストの両方を新しい上限に書き換えてください。色が変わり始める閾値は JavaScript 内の比較数値で調整できます。
全角・半角で数え方は変わりますか？
このカウンターは value.length を使うため、全角・半角を問わず 1 文字を 1 とカウントします。絵文字など一部の文字は内部表現の都合で 2 と数えられる場合がありますが、通常の日本語入力では見たままの文字数になります。