【SwiftUI】TextFieldの使い方

（2022/05/05 更新）

テキスト入力に使うTextField()の使い方を解説します。
iOS15.0から呼び出し方が若干変わりました。古いiOSバージョンでの使い方は（アーカイブ）【SwiftUI】TextFieldの使い方の記事を参照して下さい。

環境
基本的な使い方
1. 使用例
2. 表示スタイルの指定
フォーカスを制御する
1. 使用例
初期フォーカスを設定する
イベントの取得
1. 使用例
TextFieldで使えるその他のモディファイア
あわせて読みたい記事

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】13.3
【Swift】5.6
【iOS】15.4
【macOS】Monterey バージョン 12.3

基本的な使い方

TextField(title, text: Binding<String>）

【引数】
title
入力域が空の場合に表示される文字列です。（プレースホルダー）
String/SubstringもしくはLocalizedStringKey型で指定します。
一般的にはそこに何を入力すべきかを表す文言を入れます。
プレースホルダーが不要の場合は""（空文字）を指定します。

text
入力された文字列を格納するString型のプロパティへの参照（Binding）を指定します。

使用例

TextFieldに入力した文字列が、リアルタイムにTextメッセージに反映されるサンプルです。

struct ContentView: View {

@State private var name = ""

var body: some View {

VStack {

Spacer().frame(height: 100)

TextField("あなたの名前", text: $name)

.padding()

Text("こんにちは、\(name)さん")

Spacer()

}

表示スタイルの指定

.textFieldStyle(style)

【引数】
style
表示スタイルをTextFieldStyleプロトコルに準拠したスタイル構造体で指定します。
現時点のiOS15で指定できるのは、次の2種類のみです。

PlainTextFieldStyle()	枠なし（デフォルト）
RoundedBorderTextFieldStyle()	丸みのある長方形の枠を付加する

struct ContentView: View {

@State private var name = ""

var body: some View {

VStack {

Spacer().frame(height: 100)

TextField("あなたの名前", text: $name)

.textFieldStyle(RoundedBorderTextFieldStyle())

.padding()

Text("こんにちは、\(name)さん")

Spacer()

}

フォーカスを制御する

.focused(condition)

フォーカスを制御するモディファイアです。

【引数】
condition
フォーカスの状態を表すBool型プロパティ（フォーカス状態プロパティ）への参照（Binding）です。
フォーカス状態プロパティは@FocusStateプロパティラッパーを使用して定義します。

フォーカス状態プロパティの値を変更すると、対象Viewのフォーカス状態が変わります。
逆に、フォーカス状態が変化すると、それに合わせてフォーカス状態プロパティの値が変化します。

使用例

「フォーカスin」および「フォーカスout」ボタンでTextFieldのフォーカス状態が切り替わります。
また、フォーカス状態に連動してボタンの有効可否が切り替わります。

struct ContentView: View {

@State private var name = ""

@FocusState private var nameFieldIsFocused: Bool // フォーカス状態プロパティ

var body: some View {

VStack {

Spacer().frame(height: 100)

/// フォーカスの制御

HStack {

Button("フォーカス in") { nameFieldIsFocused = true}

.disabled(nameFieldIsFocused)

Button("フォーカス out") { nameFieldIsFocused = false}

.disabled(!nameFieldIsFocused)

}

.buttonStyle(.borderedProminent)

TextField("あなたの名前", text: $name)

.focused($nameFieldIsFocused)

.textFieldStyle(RoundedBorderTextFieldStyle())

.padding()

Text("こんにちは、\(name)さん")

Spacer()

}

初期フォーカスを設定する

Viewの表示と同時にTextFieldに初期フォーカスをあてるには、.onAppearモディファイア内でフォーカス状態プロパティを設定します。
onAppearの時点では、TextFieldにフォーカスをあてる準備がまだできていないので、次の例のように意図的に遅延を発生させる必要がありまます。

struct ContentView: View {

@State private var name = ""

@FocusState private var nameFieldIsFocused: Bool // フォーカス状態プロパティ

var body: some View {

VStack {

Spacer().frame(height: 100)

/// フォーカスの制御

HStack {

Button("フォーカス in") { nameFieldIsFocused = true}

.disabled(nameFieldIsFocused)

Button("フォーカス out") { nameFieldIsFocused = false}

.disabled(!nameFieldIsFocused)

}

.buttonStyle(.borderedProminent)

TextField("あなたの名前", text: $name)

.focused($nameFieldIsFocused)

.textFieldStyle(RoundedBorderTextFieldStyle())

.padding()

Text("こんにちは、\(name)さん")

Spacer()

}

.onAppear {

/// 0.5秒の遅延発生後TextFieldに初期フォーカスをあてる

DispatchQueue.main.asyncAfter(deadline: .now()+0.5) {

nameFieldIsFocused = true

}

イベントの取得

iOS15より前のTextFieldでは、イベント取得オプションとしてonEditingChangedとonCommitが使用できましたが、現在はDeprecated（非推奨）になっていますので、代わりに次のモディファイアを使用します。

.onChange(of: Equatable) {

perform

}

値の変更を検知するモディファイアです。
詳しい使い方は【SwiftUI】値の変更を検知する（onChange）を参照してください。
フォーカス状態プロパティを対象にすると、onEditingChangedと同様にフォーカスのin/outタイミングが検知できます。

.onSubmit {

action

}

ユーザーがアクションを起こしたタイミングで実行する処理をクロージャーで指定します。
通常はソフトウェアキーボードで「改行」がタップされたタイミングになります。

使用例

struct ContentView: View {

@State private var name = ""

@State private var message = ""

@FocusState private var nameFieldIsFocused: Bool // フォーカス状態プロパティ

var body: some View {

VStack {

Spacer().frame(height: 100)

/// フォーカスの制御

HStack {

Button("フォーカス in") { nameFieldIsFocused = true}

.disabled(nameFieldIsFocused)

Button("フォーカス out") { nameFieldIsFocused = false}

.disabled(!nameFieldIsFocused)

}

.buttonStyle(.borderedProminent)

TextField("あなたの名前", text: $name)

.focused($nameFieldIsFocused)

.textFieldStyle(RoundedBorderTextFieldStyle())

.padding()

.onSubmit {

message = "こんにちは、\(name)さん"

}

Text(message)

Spacer()

}

.onChange(of: nameFieldIsFocused) { isBegin in

if isBegin {

message = ""

print("フォーカスin")

} else {

print("フォーカスout")

}

TextFieldで使えるその他のモディファイア

TextFieldで使える代表的なModifierを紹介します。

キーボード指定

.keyboardType(type)

【引数】
type
表示するソフトウェアキーボードをUIKeyboardType列挙体で指定します。
指定可能な値は次の通りです。

.default	現在の入力方式のデフォルトキーボード
.asciiCapable	標準のASCII文字キーボード
.numbersAndPunctuation	数字と句読点キーボード
.URL	URLエントリ用に最適化されたキーボード
.numberPad	数値のみのキーボード
.phonePad	電話番号入力用のキーボード
.namePhonePad	人名または電話番号入力用のキーボード
.emailAddress	メールアドレス入力用のキーボード
.decimalPad	小数点入力可能な数値キーボード
.twitter	Twitterテキスト入力用キーボード
.webSearch	Web検索用語とURL入力用キーボード
.asciiCapableNumberPad	ASCII数字入力用キーボード（.numberPadと同じ？）

自動大文字入力の適用設定

.textInputAutocapitalization(autocapitalization)

【引数】
autocapitalization
アルファベット入力時の、自動大文字入力制御方法をTextInputAutocapitalization型で指定します。
指定可能な値は次の通りです。
自動大文字入力を停止したい場合は.neverを指定します。

.never	自動大文字化しません。
.characters	全ての文字を大文字化します。
.sentences	各文の最初の文字を大文字化します。（デフォルト）
.words	各単語の最初の文字を大文字化します。