🦋

SwiftUI: 文字数上限つきのTextField

2023/09/13に公開

struct ContentView: View {
    @State var text: String = ""
    private let maxLength: Int = 20

    var body: some View {
        TextField("placeholder", text: Binding<String>(
            get: { text },
            set: { text = String($0.prefix(maxLength)) }
        ))
        .textFieldStyle(.roundedBorder)
        .padding()
    }
}

TextFieldのtextに渡すBindingにBinding(get:set:)を使うことで、新しい入力を加工してからsetできる。.onChange(of: text, perform: {})を使うと、条件に従って値を加工したことを変更として検知するせいで、2回onChangeのスコープが発火してしまうのでこちらの方がベター。文字数上限だけでなく前後の空白を取り除いたり、使ってはいけない文字を検閲したりも可能。

参考

Setting Max Input Length for TextField or TextEditor in SwiftUI

Discussion