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()」を実行させることにした。

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

2018-07-26
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい