Monaca ons-input type=number でフォーカスが抜ける
現在、iPhone / Androidの開発にMonaca(旧Phone Gap)を利用しています。
作ればほぼそのままで両方のアプリが作れるので大変便利に使っています。
サポートも的確に対応いただけ、助かっています。
MonacaはAngerペースのOnsenUIってのを使ってviewは作成していきます。
今回、数値入力でハマったのでその内容と対応策について記載します。
目次
現象
ケース１）
入力した数値を削除して、再度入力しようとするとiPhoeではフォーカスが抜けてしまう。
数値入力を下記のようにコーディングしています。
<ons-input type="number" id="aa" name="aa"></ons-input>
操作例）
123 -> 全部消去 -> 0が表示される -> 再度12と入力する
Androidでは12と入力されます。
iPhoneでは2入力時にフォーカスが抜けてしまい、１しか入力されません。
0まで消去して入力すると正常に12と入力されます。
ケース２）
小数点を入力し、消していくと、小数点を消した段階でフォーカスが抜ける
操作例）
12.34 -> 12.3 ->12となったときフォーカスが抜ける
調査
日本語入力の数字のテンキーボードで入力していたのですが、英語入力のの数字入力レイアウトに切り替えたところ上記の現象は発生しませんでした。
日本語入力のテンキーを利用しているときに、入力領域を見てると背景色が出ています。
英語入力のテンキーでは背景色はありません。
もしかして、日本語入力の時は、未確定状態で動いているのか？
そこで、英語入力の数字入力レイアウトにHTMLで切り替えられないかと調べてみたのですが、英語入力の文字入力にはできるようなんですが、数字入力にする方法が見つけられませんでした。
また、ons-inputでなく、一般的なinputにしたところ、日本語入力でも上記の現象は発生しませんでした
対応策
サポートに確認するも、この件については、一週間ほど待ちましたが回答をいただけませんでした。
で、ons-inputをあきらめ、inputで作り変えることとしました。
１）ons-inputを通常のinputに変更しました。
２）$scopeでデータの入出力をしていたところを document.getElementById(“xxxx”).valueに変更しました。
３）なぜか ng-modal を付けたままだと、実数値はセットできるのですが、整数値はセットできませんでした。
→ ng-modal を削除すれば、セットできました。
その他
とりあえずは type=”number” としているところだけ対応して、その他はそのまま ons-input を利用しています。
また、ダイアログで文字入力をさせているのですが、こちらの方、document.getElementById(“xxxx”).value で数字をセットできず、現在調査中です。
キチンと動けば便利なのですが、Androidは大丈夫でiPhoneがNGってのにハマりました。
最後に！！！！
使い方が間違えてるのかも(^^;
アドバイスを頂ければありがたいです！！！
よろしくお願いします。
