アプリケーションのテキストフィールドのキーボードが、入力タイプによって最適化されることを思い出せるだろうか。メールアドレスフィールドだったり、電話番号フィールドだったりがわかりやすいかもしれない。メールアドレスを入力する場合は、＠やドットが配置されていて、電話番号を入力する場合は、数字や#＊+等の記号が配置されている。
このようにユーザーが入力しやすい機構が用意されているわけだが、テキストフィールドの入力タイプはエンジニアが明示しておく必要がある。
HTMLならば、<input>のtype属性にtextやpassword、numberなどを指定して、React Nativeならば、<TextInput>のkeyboardType propsにdefaultやnumber-padなどを指定するとキーボードが最適化される。
このエントリーでは、keyboardType propsの指定におけるキーボードビジュアルの違いを確認したい。
もくじ
キーボードタイプの対応表
- default
- number-pad
- decimal-pad
- numeric
- email-address
- phone-pad
- ascii-capable
- numbers-and-punctuation
- url
- name-phone-pad
- web-search
- visible-password
default
number-pad
decimal-pad
numeric
email-address
phone-pad
ascii-capable
numbers-and-punctuation
url
name-phone-pad
web-search
visible-password
まとめ
keyboardType propsの指定におけるキーボードビジュアルの違いについて確認してきた。プラットフォーム間においても、未対応のものがあって案件によって使い分けを検討するケースもあるかもしれない。とはいえ、適切なキーボードタイプの設定は、ユーザビリティ向上が見込めるため積極的に適用すると良さそうだ。
