Google
SSブログ

金額入力の制御-3(Parllet の場合) [公開アプリ]

※ 注意! このエントリは ブログラミング(ブログを書きながらプログラミング)です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。(過去の事例:2014年 1/4 の誤りに 1/9 に気づいて訂正、等 ^^; )

01_img.jpg

sakashushu です。

4/14からの Parllet(個人で作成・公開しているアルファ版のWeb家計簿) の金額入力の制御です。

前回 Chrome で試した input type="tel" が意外にも上手く行ったのでスマホでも確認してみます。

 

スポンサードリンク

 

 

■ ざっくり環境

OS:Windows 7 Home Premium
Play Flamework:1.2.4
スマホ:iphone4 , Android 4.1.1(freebit mobile PandA)
ブラウザ:IE 11.0, Firefox 28.0
Github公開リポジトリ のCommitバージョン(スタート時点):こちら

 

 

■ 現状

金額の入力ボックスについては jQueryプラグインのautoNumericautoNumeric.js を使わせてもらい、自動でカンマ区切りが入るようにしています。

前回、CSS の ime-mode でカバーできない Chrome への対応として、一時的にタグを HTML5 の input type="tel" に書き換える手法を試し、意外にもうまくいきました。

スマホでも上手く動くようなら、このまま採用する方向で考えています。

 

 

いつものように体当たりで学びながらブログラミング(ブログを書きながらプログラミング)していきます。

 

 

■ 体当たり開始

では 、iPhone4 で試してみます。

すると・・・

入力ボックスをタップした瞬間に(ほんの一瞬)かな入力が見えて、

02_edit1_daily_account_budget_ip_01.jpg

 

次の瞬間にテンキー入力になるという動き・・・。

03_edit1_daily_account_budget_ip_02.jpg

 

ほんのちょっとのことですけど、わたし的には結構気持ち悪いです・・・。

Android の方では、大丈夫なようです。

04_edit1_daily_account_budget_ad_01.jpg

 

で、思い出したんですが、関連して検索した中で以下のようなものがありました。

数字キーボードは出すけど、カンマは出さない方法

で、辿り着いたのが以下の方法です。
<input type="text" pattern="[0-9]*"/>
または
<input type="text" pattern="\d*"/>
type="text"なので、英数字(orカナ)キーボードが表示されそうなものですが、正規表現による英数入力制約がかかってることを解釈して、ちゃんと数字のキーボードを出してくれます。

via: iOS 5(iPhone等)の数字入力用inputフィールドでカンマを表示させない方法 - flairDays - てさぐりの日々

 

おそらく input type="tel" に変える前の input type="text" の時にかな入力になっていると思うので、有効な気がします。

試してみましょう。

Parllet/app/views/DailyAccount/dailyAccount.html 内に追記(太字の部分)

<input type="text" class="numeric bdgtBox ${vLargeCate}" name="e_budget_amount" value="${lwda.lBudgetAmount}" pattern="[0-9]*" />

 

iPhone でリロードして試します。

05_edit2_daily_account_budget_ip_01.jpg

最初からテンキー入力になりました!

 

そして、これで大体ブラウザをカバーしたかと思って動かしていて忘れていたことを思い出しました。

「input 全角半角」で検索したところ、CSS の「ime-mode」ってのを使えばいいって結果がやたら出てきたんですが、どうも IE と Firefox の3以上でしか効かないようです。
(中略)
個人的な感覚ですが、せめて IE・Firefox・Chrome はカバーしたいな~。 via: 金額入力の制御-1(Parllet の場合)

って始めたのに、ime-mode の指定をしてませんでした!

Parllet/public/stylesheets/main.css 内に追記

input.numeric {
    ime-mode: disabled;
}

 

画像は省略しますが、IE では IME が ON で固定になりました。

しかし Firefox で・・、IME の変更が出来てしまいました・・・。

バージョンは3以上どころか 28.0 です。

 

ちょっと・・・、キリが無くなってきてますね。

一応、もうちょっとだけ粘るつもりではいますが、記事にできるかどうかは不明ですm(_ _)m

 

とりあえず今回はここまでで。

お疲れ様でした。

 


 

いつも最後まで読んでいただいてありがとうございますm(_ _)m

何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)

またお越しくださいませませ!

 


nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

トラックバックの受付は締め切りました

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。