iOSで数値を入力すると値が重複する不具合の解決法
入力フォームで発生した不具合
Reactで郵便番号の入力フォームを実装した際、iOS（Safari）＋日本語キーボード（かな）で入力すると、数値が重複して表示される不具合が発生しました。
例
| 入力 | 表示 | |
| 4 | → | 4 |
| 46 | → | 446 |
| 466 | → | 446666 |
原因
iOSの日本語IMEとinputのvalue再代入が衝突していた可能性があります。
日本語IMEとは、簡単に言うと日本語の仮想キーボードです。日本語IMEは、「未確定（composition）」と「確定」があり、それが入力イベントと競合する場合があります。
そして、handleChange関数で数値のみをvalueへ再代入する処理を行っていました。
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const digitsOnly = e.target.value.replace(/\D/g, "");
onChange({
target: {
name: "pastalcode",
value: digitsOnly,
}
} as React.ChangeEvent<HTMLInputElement>);
};
<TextField
name="pastalcode"
value={pastalcode}
onChange={handleChange}
/>日本語IMEがONの状態で数値を入力＋valueの再代入が衝突したため、今回の不具合が起こった可能性が高いです。
解決策
Reactの場合
<TextField
name="pastalcode"
value={pastalcode}
onChange={handleChange}
slotProps={{
htmlInput: {
inputMode: "numeric" // numericモードにする
}
}}
/>HTMLの場合
<input type="text" inputmode="numeric" />inputmode=”numeric”にすることで、数値入力向けの仮想キーボードが表示されるように誘導しました。
Webデザイナー / コーダーのみなさまへ
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
