タグを表示

[Titanium Mobile] KEYBOARD_NUMBER_PADにキーボードツールバーで完了キーを追加する

Titaniumで数字入力用のキーボードを表示してみたけどDoneキーがないから明確に入力完了できなくて気持ち悪い……と思ってたら一応の解決方法を見つけました。

@kasumiiです。こんにちは。

iPhoneアプリ内で入力フィールドを設定するとき「keyboardType」を指定することで表示するキーボードの種類をいくつか選べて便利なのですが、

keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD

数字だけを入力させたかったので、上のように指定してみたらちょっとした問題が。

【参考】TextField – titanium-mobile-doc-ja – UIカタログ(コントロール)

数値入力用のキーボードには完了ボタンがないので、入力をどうやって終わらせたらいいのかわからないのです。。

どこか別のフィールドへフォーカスをあてたり、別のボタンを押せば入力を終わらせられるけど、それだと正常に入力を完了できたのかどうかが伝わりにくい。

どうしたもんかなーと思っていたら、同じ問題で悩んでいる方のブログ記事を発見!

【参考】KEYBOARD_NUMBER_PAD には確定キーが無い « lasiport

なるほど、キーボードツールバーに完了ボタンをつけることで解決したそうなので同様にやってみます。

「DONE」ボタンをキーボードツールバーに追加します。バーの色や高さも指定可能。

var flexSpace = Ti.UI.createButton({
	systemButton:Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
var doneButton = Ti.UI.createButton({
	systemButton:Ti.UI.iPhone.SystemButton.DONE
});
doneButton.addEventListener('click',function(){
	inputTextField.blur();
});

var inputTextField = Ti.UI.createTextField({
	width: 100,
	height: 40,
	keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
	keyboardToolbar: [flexSpace,flexSpace,doneButton],
	keyboardToolbarColor: '#333333',
	keyboardToolbarHeight: 30
});

こんな感じになりました。あんまりかっこよくないけど明確に入力を完了できるようになったのでひとまずOK。ちなみに英語だと「完了」が「Done」になります。

先のブログ記事にも書いてあったのですが、Objective-Cだともっとスマートな解決方法があるっぽい。こういうときのために、モジュール作れるくらいになりたいものです。。

【参考】UIKeyboardTypeNumberPad and the missing “return” key

このページの一番上へ

サイトのトップページへ

このページの一番下へ