SwiftUI TextField: OnEditingChange Observer


TextField has another observer which can tell us when the field is being edited or not. With the help of OnEditingChange, we can create a better experience for the user by highlighting TextField being edited.

We will use onEditingChange to draw borders around our TextField when it’s being edited.
struct TextFieldExample: View {
    
    @State private var firstName: String = ""
    @State private var age: String = ""
    
    @State private var firstNameEditing = false
    @State private var ageEditing = false
    
    var body: some View {
        VStack {
            
            Image("dt")
                .resizable()
                .frame(width: 100, height: 100)
                .clipShape(Circle())
                .shadow(color: Color.black, radius: 2, x: 1, y: 1)
                .overlay(Circle().stroke(Color.gray, lineWidth: 2))
HStack {
                Image(systemName: "person.crop.circle.fill")
                    .foregroundColor(.gray).font(.headline)
                TextField("First Name", text: $firstName, onEditingChanged: { isEditing in
                    firstNameEditing = isEditing
                })
                    .keyboardType(.asciiCapable)
                    .submitLabel(.next)
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 8).stroke(firstNameEditing ? .green : .gray, lineWidth: 1))
            .padding(.horizontal)
        
            HStack {
                Image(systemName: "heart.circle")
                    .foregroundColor(.gray).font(.headline)
                TextField("Enter age", text: $age, onEditingChanged: { isEditing in
                    ageEditing = isEditing
                })
                    .keyboardType(.numberPad)
                    .submitLabel(.done)
                    
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 8).stroke(ageEditing ? .green : .gray, lineWidth: 1))
            .padding(.horizontal)
        }
    }
}