やってみよう電話番号やカード番号の欄に、数字だけを打ってみてください
入力フォームマイナー（知る人ぞ知る）
入力の自動整形
Input Mask / Formatting
電話番号やカード番号を打つと、自動で「-」や空白が入り、金額には「,」が付いて読みやすくなる。
別名入力マスク自動でハイフン金額のカンマフォーマット入力
どこで使われている？
- よく見かける場所
- 会員登録の電話番号・郵便番号、ネットショップのカード番号、送金アプリの金額
- 使うとよい場面
- 決まった形の番号を、間違えずに入力してもらいたいとき
- 避けたい場面
- 形が決まっていない入力（海外の電話番号など）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「入力の自動整形（Input Mask / Formatting）」を実装してください。 動き：入力された数字に合わせて、電話番号は「090-1234-5678」、カード番号は4桁ごとの空白、金額は3桁ごとのカンマを自動で入れて表示する。数字以外の文字は入らないようにする。 使う部品：input イベントで整形し直す（imask などのライブラリ）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | input イベントで整形し直す（imask などのライブラリ） |
|---|---|
| iPhoneアプリなら | TextField の onChange で整形（自作） |
| Androidアプリなら | VisualTransformation で整形 |
| Flutterなら | TextInputFormatter（mask_text_input_formatter） |
| React Nativeなら | react-native-mask-input |