← 一覧へ

やってみよう入力欄に文字を打ってみてください

入力フォームメジャー（よく見る）

文字数カウンター

Character Counter

文字を打つたびに「12 / 140」のように数が増え、上限に近づくと色が変わって知らせる。

別名文字数制限表示残り文字数カウンター（入力）0/140

どこで使われている？

よく見かける場所
X（旧Twitter）の投稿、プロフィールの自己紹介、レビュー投稿
使うとよい場面
文字数に上限がある入力欄
避けたい場面
上限がない欄

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「文字数カウンター（Character Counter）」を実装してください。

動き：入力欄の右下に「現在の文字数 / 上限」を表示し、打つたびに更新する。上限の9割を超えたら橙色、超えたら赤色にして、超えた分は送信できないようにする。

使う部品：maxlength と入力文字数の表示で自作
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトならmaxlength と入力文字数の表示で自作
iPhoneアプリならtext.count を表示して自作
AndroidアプリならOutlinedTextField の supportingText に表示
FlutterならTextField の maxLength（カウンターが自動で出る）
React NativeならmaxLength と文字数の表示で自作

似ているもの・一緒に使うもの