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)
}
}
}