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

@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」になります。