📝

SwiftUI のTextField で入力できる文字数を制限する

2021/03/30に公開1件

「テキストフィールドに入力できる文字をx文字までに制限したい」という場面があります。
Combine フレームワークをインポートし、onReceive でJust パブリッシャーを使うことでその挙動が実現できました。

コード

import SwiftUI
import Combine

let maxCharacterLength = Int(6)

struct YourView: View {
    @State private var text = String("")

    var body: some View {
        TextField("", text: $text)
            .onReceive(Just(text), perform: { _ in
                if maxCharacterLength < text.count {
                    text = String(text.prefix(maxCharacterLength))
                }
            })       
    }
}

Discussion

JboyHashimoto

こちらの記事参考になりました。変数のところがtextだったのでプロパティと名前被ってたので最初はハマりました💦

こんな感じでできた🙌

let maxCharacterLength = Int(20)

struct EditView: View {
    @EnvironmentObject var viewModel: MemoViewModel
    @Environment(\.presentationMode) var presentationMode
    let memo: Memo
    @State private var newTitle: String

    init(memo: Memo) {
        self.memo = memo
        _newTitle = State(initialValue: memo.title)
    }

    var body: some View {
        Form {
            TextField("20字まで入力可能", text: $newTitle)
                .onReceive(Just(newTitle), perform: { _ in
                    if maxCharacterLength < newTitle.count {
                        newTitle = String(newTitle.prefix(maxCharacterLength))
                    }
                })
            Button("更新") {
                viewModel.updateMemo(memo: memo, newTitle: newTitle, newDate: Date())
                presentationMode.wrappedValue.dismiss()
            }
        }
        .navigationTitle("編集ページ")
    }
}