html formのinputでmaxlengthを指定したときにバグる

2017/08/03

やっていたのは下記のような感じ。

<input type=”text” maxlength=”3″ id=”zip1″ />
<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()」を実行させることにした。

新着(ニュース関連以外)

2017-08-03
formのinputでmaxlengthを使うとFirefoxでバグってた。他のブラウザでも気づかずにバグってたかもしれない。
2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。
2017-06-27
MACにWin10をインストールしてみた:再挑戦。
2017-06-25
「簡単」っていうヤツらが多いけど・・・難しいぞ。