html formのinputでmaxlengthを指定したときにバグる
2017/08/03
やっていたのは下記のような感じ。
<input type=”text” maxlength=”3″ id=”zip1″ />
<input type=”text” maxlength=”4″ id=”zip2″ />
<input type=”text” maxlength=”4″ id=”zip2″ />
「id=zip1」で3桁入力したら「id=zip2」に移動させるってのをやっていた。
内容としては「id=zip1」で全角入力されたら半角にして文字数チェックして「id=zip2」に移動ってな感じ。
不具合
問題となったのは・・・日本語入力(ひらがな)のときにテンキーで数字入力したときだけ。
「id=zip1」で3桁目を入力すると3桁目が削除されてイベントが文字数チェックが走ってしまう。
inputイベントで拾っていたけど・・・拾ったタイミングですでに3桁目が削除されていた。
日本語入力(ひらがな)でキーボードの英語の上にある数字のキーはいけるけどテンキーだけダメ。
対策
調べても「maxlengthは使うな」としかなくよくわからん。
対策としてmaxlengthは使わずにjquery側で文字数チェックして「$(this).blur()」を実行させることにした。