テンキー入力機能の実装
こんにちは、サンプルアプリ開発者の山 田健一です。
スマートフォンのソフトキーボードは使いづらいと思ったことはありませんか？
特に数値入力のみのときは電卓のような使い勝手が欲しいものです。
そこで、今回はテンキー入力の自作を紹介します。
つぎのようなイメージのものを作ります。
自作テンキーのイメージ
また、数値入力画面として、次のようなメイン画面を用意します。
数値入力画面
入力部分をタップすると、テンキー画面に切り替わります。
その際、上の12のように既に入力されたデータがあるときはテンキー部の上に表示します。
数値入力は電卓の感覚で行えますし、小数点以下の入力も可能です。
[ent]ボタンタップで元の画面に戻り、指定したエリアに入力数値を表示します。
それではコードを見ていきましょう。
index.htmlのbody部のコードは次のようになります。
index.htmlのbody部
上側の最初に表示されるページの input タグに readonly が指定されていることに注目してください。この指定により、input タグをタップしてもソフトキーボードが開くことはなくなります。
また、クリックイベントの tenkey 関数には、どのエレメントがタップされたかの情報を引数として与えています。
この引数を頼りにテンキー部が値を返してきます。
次は下側のテンキー部分です 。
TABLEタグを使用してレイアウトを整えています。また、各列の幅を揃えるたに width="33.3%" の指定をしています。
テンキー部の各キーがタップされたときはkeyin関数が呼ばれます。
JSコードを見ていきましょう。
初期画面に関連したコードは次のようになります。
初期画面に関連したコード
入力IDにはテンキー部で[ent]ボタンがタップされたときに値をセットするエレメントIDが入ります。
入力データはテンキー部との値の受け渡しに使用します。
tenkey 関数では渡されたエレメントIDを入力IDにセットして、そのエレメントの内容をテンキー部の数値部にセットします。
[javascript]
location.hash = "_tenkeyForm";
[/javascript]
でテンキー部に画面遷移します。
テンキー部のコードは次のようになります。
テンキー部のコード
取り立てて難しいものはありませんが、小数点が入力された後は、次の小数点を無視するなどの工夫をしています。
初期画面に戻るときは、iUIの関数である
//homeに戻る
iui.showPageById("home");
を用いています。
このテンキー部の応用として、小数点以下は1桁しか入力させないなどの制限を加えることなどが考えられます。
また、[+/-]ボタンや小数点は不要なら非表示にすることもできます。
状況に応じて応用してください。
ソースファイル、APKファイルは以下からダウンロードしてください。
