[React Native] keyboardType propsのキーボードビジュアルの違い

アプリケーションのテキストフィールドのキーボードが、入力タイプによって最適化されることを思い出せるだろうか。メールアドレスフィールドだったり、電話番号フィールドだったりがわかりやすいかもしれない。メールアドレスを入力する場合は、@やドットが配置されていて、電話番号を入力する場合は、数字や#*+等の記号が配置されている。

このようにユーザーが入力しやすい機構が用意されているわけだが、テキストフィールドの入力タイプはエンジニアが明示しておく必要がある。

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
  • twitter
  • web-search
  • visible-password

default

number-pad

decimal-pad

numeric

email-address

phone-pad

ascii-capable

numbers-and-punctuation

url

name-phone-pad

twitter

web-search

visible-password

まとめ

keyboardType propsの指定におけるキーボードビジュアルの違いについて確認してきた。プラットフォーム間においても、未対応のものがあって案件によって使い分けを検討するケースもあるかもしれない。とはいえ、適切なキーボードタイプの設定は、ユーザビリティ向上が見込めるため積極的に適用すると良さそうだ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です