入力マスク
電話番号を入力すると自動整形（03-1234-5678 形式）。数字以外は無視され、入力がスムーズになる。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- 電話番号・郵便番号など桁が決まった数値入力
- ハイフンを自動で入れてカーソル位置を保ちたい欄
- 数字以外を弾いて整形済みの値だけ持ちたいフォーム
- 避ける場面
- 桁数が変わる国際電話番号（10桁固定の整形）
- 自由記述の文字列
- 構成要素
- ラベル
- 入力欄
- ヒント（整形結果）
- 持っている状態
- 通常
- フォーカス
- キーボード
数字キーで入力すると桁ごとにハイフンが入り、カーソルは同じ桁の直後に保たれる。数字以外は無視される
- 支援技術
label[for] で名前を結び、aria-describedby でヒント（整形結果）を関連付ける。type=tel＋inputmode=numeric でモバイルは数字キーボード、autocomplete=tel。整形完了はヒント文言で示す
- 動き
枠色 200ms（フォーカス）。reduced-motion で無効
デザインの要点
- カーソルは「何桁目の数字の直後か」で復元する。文字位置で戻すとハイフンが挿入された瞬間に1つずれる
- IME 変換中は整形しない。全角数字を確定する前に書き換えると、未確定文字が壊れる
- type=tel と inputmode=numeric でスマホは数字キーボードにする。type=number は先頭の 0 が消えるので使わない
- 整形結果はヒントにも出す。欄の中だけだと、10桁そろったかを目で数えることになる
コード（コピーして使えます）
<div class="im-wrap">
<label class="im-label" for="im-input">電話番号</label>
<input
id="im-input"
class="im-input"
type="tel"
placeholder="0312345678"
inputmode="numeric"
maxlength="12"
autocomplete="tel"
aria-describedby="im-hint"
/>
<p class="im-hint" id="im-hint">数字を入力すると自動整形されます</p>
</div>