I want to be able to display the system keyboard and my app take inputs from the keyboard without using a TextField or the like. My simple example app is as follows:
struct TypingGameView: View {
let text = “Some example text”
#State var displayedText: String = ""
var body: some View {
Text(displayedText)
}
}
I'm making a memorization app, so when I user types an input on the keyboard, it should take the next word from text and add it to displayedText to display onscreen. The keyboard should automatically pop up when the view is displayed.
If there is, a native SwiftUI solution would be great, something maybe as follows:
struct TypingGameView: View {
let text = “Some example text”
#State var displayedText: String = ""
var body: some View {
Text(displayedText)
.onAppear {
showKeyboard()
}
.onKeyboardInput { keyPress in
displayedText += keyPress
}
}
}
A TextField could work if there is some way to 1. Make it so that whatever is typed does not display in the TextField, 2. Disable tapping the text (e.g. moving the cursor or selecting), 3. Disable deleting text.
Here's a possible solution using UIViewRepresentable:
Create a subclass of UIView that implements UIKeyInput but doesn't draw anything
Wrap it inside a struct implementing UIViewRepresentable, use a Coordinator as a delegate to your custom UIView to carry the edited text "upstream"
Wrap it again in a ViewModifier that shows the content, pass a binding to the wrapper and triggers the first responder of your custom UIView when tapped
I'm sure there's a more synthetic solution to find, three classes for such a simple problem seems a bit much.
protocol InvisibleTextViewDelegate {
func valueChanged(text: String?)
}
class InvisibleTextView: UIView, UIKeyInput {
var text: String?
var delegate: InvisibleTextViewDelegate?
override var canBecomeFirstResponder: Bool { true }
// MARK: UIKeyInput
var keyboardType: UIKeyboardType = .decimalPad
var hasText: Bool { text != nil }
func insertText(_ text: String) {
self.text = (self.text ?? "") + text
setNeedsDisplay()
delegate?.valueChanged(text: self.text)
}
func deleteBackward() {
if var text = text {
_ = text.popLast()
self.text = text
}
setNeedsDisplay()
delegate?.valueChanged(text: self.text)
}
}
struct InvisibleTextViewWrapper: UIViewRepresentable {
typealias UIViewType = InvisibleTextView
#Binding var text: String?
#Binding var isFirstResponder: Bool
class Coordinator: InvisibleTextViewDelegate {
var parent: InvisibleTextViewWrapper
init(_ parent: InvisibleTextViewWrapper) {
self.parent = parent
}
func valueChanged(text: String?) {
parent.text = text
}
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
func makeUIView(context: Context) -> InvisibleTextView {
let view = InvisibleTextView()
view.delegate = context.coordinator
return view
}
func updateUIView(_ uiView: InvisibleTextView, context: Context) {
if isFirstResponder {
uiView.becomeFirstResponder()
} else {
uiView.resignFirstResponder()
}
}
}
struct EditableText: ViewModifier {
#Binding var text: String?
#State var editing: Bool = false
func body(content: Content) -> some View {
content
.background(InvisibleTextViewWrapper(text: $text, isFirstResponder: $editing))
.onTapGesture {
editing.toggle()
}
.background(editing ? Color.gray : Color.clear)
}
}
extension View {
func editableText(_ text: Binding<String?>) -> some View {
modifier(EditableText(text: text))
}
}
struct CustomTextField_Previews: PreviewProvider {
struct Container: View {
#State private var value: String? = nil
var body: some View {
HStack {
if let value = value {
Text(value)
Text("meters")
.font(.subheadline)
} else {
Text("Enter a value...")
}
}
.editableText($value)
}
}
static var previews: some View {
Group {
Container()
}
}
}
you can have the textfield on screen but set opacity to 0 if you don't want it shown. Though this would not solve for preventing of deleting the text
You can then programmatically force it to become first responder using something like this https://stackoverflow.com/a/56508132/3919220
How do i select all text when clicking inside the textfield? Just like how a web browser like chrome would when you click inside the address bar.
import SwiftUI
import AppKit
struct ContentView: View {
var body: some View {
TextField("Enter a URL", text: $site)
}
}
SwiftUI Solution:
struct ContentView: View {
var body: some View {
TextField("Placeholder", text: .constant("This is text data"))
.onReceive(NotificationCenter.default.publisher(for: UITextField.textDidBeginEditingNotification)) { obj in
if let textField = obj.object as? UITextField {
textField.selectedTextRange = textField.textRange(from: textField.beginningOfDocument, to: textField.endOfDocument)
}
}
}
}
Note : import Combine
Use UIViewRepresentable and wrap UITextField and use textField.selectedTextRange property with delegate.
Here is the sample demo
struct HighlightTextField: UIViewRepresentable {
#Binding var text: String
func makeUIView(context: Context) -> UITextField {
let textField = UITextField()
textField.delegate = context.coordinator
return textField
}
func updateUIView(_ textField: UITextField, context: Context) {
textField.text = text
}
func makeCoordinator() -> Coordinator {
Coordinator(parent: self)
}
class Coordinator: NSObject, UITextFieldDelegate {
var parent: HighlightTextField
init(parent: HighlightTextField) {
self.parent = parent
}
func textFieldDidBeginEditing(_ textField: UITextField) {
textField.selectedTextRange = textField.textRange(from: textField.beginningOfDocument, to: textField.endOfDocument)
}
}
}
For macOS
struct HighlightTextField: NSViewRepresentable {
#Binding var text: String
func makeNSView(context: Context) -> CustomTextField {
CustomTextField()
}
func updateNSView(_ textField: CustomTextField, context: Context) {
textField.stringValue = text
}
}
class CustomTextField: NSTextField {
override func mouseDown(with event: NSEvent) {
if let textEditor = currentEditor() {
textEditor.selectAll(self)
}
}
}
Here is my solution
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
#State private var renameTmpText: String = ""
#FocusState var isFocused: Bool
#State private var textSelected = false
var body: some View {
TextEditor(text: $renameTmpText)
.padding(3)
.border(Color.accentColor, width: 1)
.frame(width: 120, height: 40)
.onExitCommand(perform: {
renameTmpText = ""
})
.onAppear {
renameTmpText = "Test"
isFocused = true
}
.focused($isFocused)
.onReceive(NotificationCenter.default.publisher(for: NSTextView.didChangeSelectionNotification)) { obj in
if let textView = obj.object as? NSTextView {
guard !textSelected else { return }
let range = NSRange(location: 0, length: textView.string.count)
textView.setSelectedRange(range)
textSelected = true
}
}
.onDisappear { textSelected = false }
}
}
let view = ContentView()
PlaygroundPage.current.setLiveView(view)
I've created a ViewModifier to select all the text in a TextField.
Only downside is, it won't work with multiple TextFields.
public struct SelectTextOnEditingModifier: ViewModifier {
public func body(content: Content) -> some View {
content
.onReceive(NotificationCenter.default.publisher(for: UITextField.textDidBeginEditingNotification)) { obj in
if let textField = obj.object as? UITextField {
textField.selectedTextRange = textField.textRange(from: textField.beginningOfDocument, to: textField.endOfDocument)
}
}
}
}
extension View {
/// Select all the text in a TextField when starting to edit.
/// This will not work with multiple TextField's in a single view due to not able to match the selected TextField with underlying UITextField
public func selectAllTextOnEditing() -> some View {
modifier(SelectTextOnEditingModifier())
}
}
usage:
TextField("Placeholder", text: .constant("This is text data"))
.selectAllTextOnEditing()
I have created a custom text field and I'd like to take advantage of Combine. In order to be notified whenever text changes in my text field, I currently use a custom modifier. It works well, but I want this code could inside my CustomTextField struct.
My CustomTextField struct conforms to UIViewRepresentable. Inside this struct, there is a NSObject class called Coordinator and it conforms to UITextFieldDelegate.
I'm already using other UITextField delegate methods, but couldn't find one that does exactly what I already do with my custom modifier. Some methods are close, but don't quite behave the way I want them to. Anyway, I feel it would be best to put this new custom textFieldDidChange method in the Coordinator class.
Here is my custom modifier
private let textFieldDidChange = NotificationCenter.default
.publisher(for: UITextField.textDidChangeNotification)
.map { $0.object as! UITextField}
struct CustomModifer: ViewModifier {
func body(content: Content) -> some View {
content
.tag(1)
.onReceive(textFieldDidChange) { data in
//do something
}
}
}
My CustomTextField is used in a SwiftUI view, with my custom modifier attached to it. I’m able to do things when ever there are changes to the text field. The modifier is also using Combine. It works great, but I don't want this functionality to be in the form of a modifier. I want to use it in my Coordinator class, along with my UITextFieldDelegate methods.
This is my CustomTextField
struct CustomTextField: UIViewRepresentable {
var isFirstResponder: Bool = false
#EnvironmentObject var authenticationViewModel: AuthenticationViewModel
func makeCoordinator() -> Coordinator {
return Coordinator(authenticationViewModel: self._authenticationViewModel)
}
class Coordinator: NSObject, UITextFieldDelegate {
var didBecomeFirstResponder = false
#EnvironmentObject var authenticationViewModel: AuthenticationViewModel
init(authenticationViewModel: EnvironmentObject<AuthenticationViewModel>)
{
self._authenticationViewModel = authenticationViewModel
}
// Limit the amount of characters that can be typed in the field
func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
let currentText = textField.text ?? ""
guard let stringRange = Range(range, in: currentText) else { return false }
let updatedText = currentText.replacingCharacters(in: stringRange, with: string)
return updatedText.count <= 14
}
/* I want to put my textFieldDidChange method right here */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * */
func textFieldDidEndEditing(_ textField: UITextField) {
textField.resignFirstResponder()
textField.endEditing(true)
}
}
func makeUIView(context: Context) -> UITextField {
let textField = UITextField()
textField.delegate = context.coordinator
textField.placeholder = context.coordinator.authenticationViewModel.placeholder
textField.font = .systemFont(ofSize: 33, weight: .bold)
textField.keyboardType = .numberPad
return textField
}
func updateUIView(_ uiView: UITextField, context: Context) {
let textField = uiView
textField.text = self.authenticationViewModel.text
}
}
struct CustomTextField_Previews: PreviewProvider {
static var previews: some View {
CustomTextField()
.previewLayout(.fixed(width: 270, height: 55))
.previewDisplayName("Custom Textfield")
.previewDevice(.none)
}
}
I've been watching videos about Combine and I'd like to start utilising it in a new app I'm building. I really think it's the right thing to use in this situation, but still not quite sure how to pull this off. I'd really appreciate an example.
To summarise:
I want to add a function called textFieldDidChange to my Coordinator class, and it should be triggered every time there is a change to my text field. It must utilise Combine.
Thanks in advance
Updated Answer
After looking at your updated question, I realized my original answer could use some cleaning up. I had collapsed the model and coordinator into one class, which, while it worked for my example, is not always feasible or desirable. If the model and coordinator cannot be the same, then you can't rely on the model property's didSet method to update the textField. So instead, I'm making use of the Combine publisher we get for free using a #Published variable inside our model.
The key things we need to do are to:
Make a single source of truth by keeping model.text and textField.text in sync
Use the publisher provided by the #Published property wrapper to update textField.text when model.text changes
Use the .addTarget(:action:for) method on textField to update model.text when textfield.text changes
Execute a closure called textDidChange when our model changes.
(I prefer using .addTarget for #1.2 rather than going through NotificationCenter, as it's less code, worked immediately, and it is well known to users of UIKit).
Here is an updated example that shows this working:
Demo
import SwiftUI
import Combine
// Example view showing that `model.text` and `textField.text`
// stay in sync with one another
struct CustomTextFieldDemo: View {
#ObservedObject var model = Model()
var body: some View {
VStack {
// The model's text can be used as a property
Text("The text is \"\(model.text)\"")
// or as a binding,
TextField(model.placeholder, text: $model.text)
.disableAutocorrection(true)
.padding()
.border(Color.black)
// or the model itself can be passed to a CustomTextField
CustomTextField().environmentObject(model)
.padding()
.border(Color.black)
}
.frame(height: 100)
.padding()
}
}
Model
class Model: ObservableObject {
#Published var text = ""
var placeholder = "Placeholder"
}
View
struct CustomTextField: UIViewRepresentable {
#EnvironmentObject var model: Model
func makeCoordinator() -> CustomTextField.Coordinator {
Coordinator(model: model)
}
func makeUIView(context: UIViewRepresentableContext<CustomTextField>) -> UITextField {
let textField = UITextField()
// Set the coordinator as the textField's delegate
textField.delegate = context.coordinator
// Set up textField's properties
textField.text = context.coordinator.model.text
textField.placeholder = context.coordinator.model.placeholder
textField.autocorrectionType = .no
// Update model.text when textField.text is changed
textField.addTarget(context.coordinator,
action: #selector(context.coordinator.textFieldDidChange),
for: .editingChanged)
// Update textField.text when model.text is changed
// The map step is there because .assign(to:on:) complains
// if you try to assign a String to textField.text, which is a String?
// Note that assigning textField.text with .assign(to:on:)
// does NOT trigger a UITextField.Event.editingChanged
let sub = context.coordinator.model.$text.receive(on: RunLoop.main)
.map { Optional($0) }
.assign(to: \UITextField.text, on: textField)
context.coordinator.subscribers.append(sub)
// Become first responder
textField.becomeFirstResponder()
return textField
}
func updateUIView(_ textField: UITextField, context: UIViewRepresentableContext<CustomTextField>) {
// If something needs to happen when the view updates
}
}
View.Coordinator
extension CustomTextField {
class Coordinator: NSObject, UITextFieldDelegate, ObservableObject {
#ObservedObject var model: Model
var subscribers: [AnyCancellable] = []
// Make subscriber which runs textDidChange closure whenever model.text changes
init(model: Model) {
self.model = model
let sub = model.$text.receive(on: RunLoop.main).sink(receiveValue: textDidChange)
subscribers.append(sub)
}
// Cancel subscribers when Coordinator is deinitialized
deinit {
for sub in subscribers {
sub.cancel()
}
}
// Any code that needs to be run when model.text changes
var textDidChange: (String) -> Void = { text in
print("Text changed to \"\(text)\"")
// * * * * * * * * * * //
// Put your code here //
// * * * * * * * * * * //
}
// Update model.text when textField.text is changed
#objc func textFieldDidChange(_ textField: UITextField) {
model.text = textField.text ?? ""
}
// Example UITextFieldDelegate method
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
textField.resignFirstResponder()
return true
}
}
}
Original Answer
It sounds like you have a few goals:
Use a UITextField so you can use functionality like .becomeFirstResponder()
Perform an action when the text changes
Notify other SwiftUI views that the text has changed
I think you can satisfy all these using a single model class, and the UIViewRepresentable struct. The reason I structured the code this way is so that you have a single source of truth (model.text), which can be used interchangeably with other SwiftUI views that take a String or Binding<String>.
Model
class MyTextFieldModel: NSObject, UITextFieldDelegate, ObservableObject {
// Must be weak, so that we don't have a strong reference cycle
weak var textField: UITextField?
// The #Published property wrapper just makes a Combine Publisher for the text
#Published var text: String = "" {
// If the model's text property changes, update the UITextField
didSet {
textField?.text = text
}
}
// If the UITextField's text property changes, update the model
#objc func textFieldDidChange() {
text = textField?.text ?? ""
// Put your code that needs to run on text change here
print("Text changed to \"\(text)\"")
}
// Example UITextFieldDelegate method
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
textField.resignFirstResponder()
return true
}
}
View
struct MyTextField: UIViewRepresentable {
#ObservedObject var model: MyTextFieldModel
func makeUIView(context: UIViewRepresentableContext<MyTextField>) -> UITextField {
let textField = UITextField()
// Give the model a reference to textField
model.textField = textField
// Set the model as the textField's delegate
textField.delegate = model
// TextField setup
textField.text = model.text
textField.placeholder = "Type in this UITextField"
// Call the model's textFieldDidChange() method on change
textField.addTarget(model, action: #selector(model.textFieldDidChange), for: .editingChanged)
// Become first responder
textField.becomeFirstResponder()
return textField
}
func updateUIView(_ textField: UITextField, context: UIViewRepresentableContext<MyTextField>) {
// If something needs to happen when the view updates
}
}
If you don't need #3 above, you could replace
#ObservedObject var model: MyTextFieldModel
with
#ObservedObject private var model = MyTextFieldModel()
Demo
Here's a demo view showing all this working
struct MyTextFieldDemo: View {
#ObservedObject var model = MyTextFieldModel()
var body: some View {
VStack {
// The model's text can be used as a property
Text("The text is \"\(model.text)\"")
// or as a binding,
TextField("Type in this TextField", text: $model.text)
.padding()
.border(Color.black)
// but the model itself should only be used for one wrapped UITextField
MyTextField(model: model)
.padding()
.border(Color.black)
}
.frame(height: 100)
// Any view can subscribe to the model's text publisher
.onReceive(model.$text) { text in
print("I received the text \"\(text)\"")
}
}
}
I also needed to use a UITextField in SwiftUI, so I tried the following code:
struct MyTextField: UIViewRepresentable {
private var placeholder: String
#Binding private var text: String
private var textField = UITextField()
init(_ placeholder: String, text: Binding<String>) {
self.placeholder = placeholder
self._text = text
}
func makeCoordinator() -> Coordinator {
Coordinator(textField: self.textField, text: self._text)
}
func makeUIView(context: Context) -> UITextField {
textField.placeholder = self.placeholder
textField.font = UIFont.systemFont(ofSize: 20)
return textField
}
func updateUIView(_ uiView: UITextField, context: Context) {
}
class Coordinator: NSObject {
private var dispose = Set<AnyCancellable>()
#Binding var text: String
init(textField: UITextField, text: Binding<String>) {
self._text = text
super.init()
NotificationCenter.default
.publisher(for: UITextField.textDidChangeNotification, object: textField)
.compactMap { $0.object as? UITextField }
.compactMap { $0.text }
.receive(on: RunLoop.main)
.assign(to: \.text, on: self)
.store(in: &dispose)
}
}
}
struct ContentView: View {
#State var text: String = ""
var body: some View {
VStack {
MyTextField("placeholder", text: self.$text).padding()
Text(self.text).foregroundColor(.red).padding()
}
}
}
I'm a little confused with what you're asking because you're talking about UITextField and SwiftUI.
What about something like this? It doesn't use UITextField instead it uses SwiftUI's TextField object instead.
This class will notify you whenever there's a change to the TextField in your ContentView.
class CustomModifier: ObservableObject {
var observedValue: String = "" {
willSet(observedValue) {
print(observedValue)
}
}
}
Ensure that you use #ObservedObject on your modifier class and you'll be able to see the changes.
struct ContentView: View {
#ObservedObject var modifier = CustomModifier()
var body: some View {
TextField("Input:", text: $modifier.observedValue)
}
}
If this is completely off track with what you're asking then can I suggest the following article, which may help?
https://medium.com/#valv0/textfield-and-uiviewrepresentable-46a8d3ec48e2
Here's my SwiftUI code:
struct ContentView : View {
#State var showingTextField = false
#State var text = ""
var body: some View {
return VStack {
if showingTextField {
TextField($text)
}
Button(action: { self.showingTextField.toggle() }) {
Text ("Show")
}
}
}
}
What I want is when the text field becomes visible, to make the text field become the first responder (i.e. receive focus & have the keyboard pop up).
Using SwiftUI-Introspect, you can do:
TextField("", text: $value)
.introspectTextField { textField in
textField.becomeFirstResponder()
}
Swift UI 3
As of Xcode 13, you can use the focused modifier to make a view become first responder.
Swift UI 1/2
It doesn't seem to be possible at the moment, but you can implement something similar yourself.
You can create a custom text field and add a value to make it become first responder.
struct CustomTextField: UIViewRepresentable {
class Coordinator: NSObject, UITextFieldDelegate {
#Binding var text: String
var didBecomeFirstResponder = false
init(text: Binding<String>) {
_text = text
}
func textFieldDidChangeSelection(_ textField: UITextField) {
text = textField.text ?? ""
}
}
#Binding var text: String
var isFirstResponder: Bool = false
func makeUIView(context: UIViewRepresentableContext<CustomTextField>) -> UITextField {
let textField = UITextField(frame: .zero)
textField.delegate = context.coordinator
return textField
}
func makeCoordinator() -> CustomTextField.Coordinator {
return Coordinator(text: $text)
}
func updateUIView(_ uiView: UITextField, context: UIViewRepresentableContext<CustomTextField>) {
uiView.text = text
if isFirstResponder && !context.coordinator.didBecomeFirstResponder {
uiView.becomeFirstResponder()
context.coordinator.didBecomeFirstResponder = true
}
}
}
Note: didBecomeFirstResponder is needed to make sure the text field becomes first responder only once, not on every refresh by SwiftUI!
You would use it like this...
struct ContentView : View {
#State var text: String = ""
var body: some View {
CustomTextField(text: $text, isFirstResponder: true)
.frame(width: 300, height: 50)
.background(Color.red)
}
}
P.S. I added a frame as it doesn't behave like the stock TextField, meaning there's more stuff going on behind the scenes.
More on Coordinators in this excellent WWDC 19 talk:
Integrating SwiftUI
Tested on Xcode 11.4
iOS 15
There is a new wrapper called #FocusState that controls the state of the keyboard and the focused keyboard ('aka' firstResponder).
Become First Responder ( Focused )
If you use a focused modifier on the text fields, you can make them become focused:
Resign first responder ( Dismiss keyboard )
or dismiss the keyboard by setting the variable to nil:
iOS 13 and above: Old but working!
Simple wrapper struct - Works like a native:
Note that Text binding support added as requested in the comments
struct LegacyTextField: UIViewRepresentable {
#Binding public var isFirstResponder: Bool
#Binding public var text: String
public var configuration = { (view: UITextField) in }
public init(text: Binding<String>, isFirstResponder: Binding<Bool>, configuration: #escaping (UITextField) -> () = { _ in }) {
self.configuration = configuration
self._text = text
self._isFirstResponder = isFirstResponder
}
public func makeUIView(context: Context) -> UITextField {
let view = UITextField()
view.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
view.addTarget(context.coordinator, action: #selector(Coordinator.textViewDidChange), for: .editingChanged)
view.delegate = context.coordinator
return view
}
public func updateUIView(_ uiView: UITextField, context: Context) {
uiView.text = text
configuration(uiView)
switch isFirstResponder {
case true: uiView.becomeFirstResponder()
case false: uiView.resignFirstResponder()
}
}
public func makeCoordinator() -> Coordinator {
Coordinator($text, isFirstResponder: $isFirstResponder)
}
public class Coordinator: NSObject, UITextFieldDelegate {
var text: Binding<String>
var isFirstResponder: Binding<Bool>
init(_ text: Binding<String>, isFirstResponder: Binding<Bool>) {
self.text = text
self.isFirstResponder = isFirstResponder
}
#objc public func textViewDidChange(_ textField: UITextField) {
self.text.wrappedValue = textField.text ?? ""
}
public func textFieldDidBeginEditing(_ textField: UITextField) {
self.isFirstResponder.wrappedValue = true
}
public func textFieldDidEndEditing(_ textField: UITextField) {
self.isFirstResponder.wrappedValue = false
}
}
}
Usage:
struct ContentView: View {
#State var text = ""
#State var isFirstResponder = false
var body: some View {
LegacyTextField(text: $text, isFirstResponder: $isFirstResponder)
}
}
🎁 Bonus: Completely customizable
LegacyTextField(text: $text, isFirstResponder: $isFirstResponder) {
$0.textColor = .red
$0.tintColor = .blue
}
This method is fully adaptable. For example, you can see How to add an Activity indicator in SwiftUI with the same method here
iOS 15.0+
macOS 12.0+,
Mac Catalyst 15.0+,
tvOS 15.0+,
watchOS 8.0+
Use focused(_:) if you have a single TextField.
focused(_:)
Modifies this view by binding its focus state to the given Boolean state value.
struct NameForm: View {
#FocusState private var isFocused: Bool
#State private var name = ""
var body: some View {
TextField("Name", text: $name)
.focused($isFocused)
Button("Submit") {
if name.isEmpty {
isFocued = true
}
}
}
}
Use focused(_:equals:) should you have multiple TextFields.
focused(_:equals:)
Modifies this view by binding its focus state to the given state value.
struct LoginForm: View {
enum Field: Hashable {
case usernameField
case passwordField
}
#State private var username = ""
#State private var password = ""
#FocusState private var focusedField: Field?
var body: some View {
Form {
TextField("Username", text: $username)
.focused($focusedField, equals: .usernameField)
SecureField("Password", text: $password)
.focused($focusedField, equals: .passwordField)
Button("Sign In") {
if username.isEmpty {
focusedField = .usernameField
} else if password.isEmpty {
focusedField = .passwordField
} else {
handleLogin(username, password)
}
}
}
}
}
SwiftUI Documentation
focused(_:)
focused(_:equals:)
#FocusState
Update
I tested this in Xcode version 13.0 beta 5 (13A5212g). It works
For anyone who ended up here but faced crashed using #Matteo Pacini's answer, please be aware of this change in beta 4: Cannot assign to property: '$text' is immutable about this block:
init(text: Binding<String>) {
$text = text
}
should use:
init(text: Binding<String>) {
_text = text
}
And if you want to make the textfield become first responder in a sheet, please be aware that you cannot call becomeFirstResponder until the textfield is shown. In other words, putting #Matteo Pacini's textfield directly in sheet content causes crash.
To solve the issue, add an additional check uiView.window != nil for textfield's visibility. Only focus after it is in the view hierarchy:
struct AutoFocusTextField: UIViewRepresentable {
#Binding var text: String
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
func makeUIView(context: UIViewRepresentableContext<AutoFocusTextField>) -> UITextField {
let textField = UITextField()
textField.delegate = context.coordinator
return textField
}
func updateUIView(_ uiView: UITextField, context:
UIViewRepresentableContext<AutoFocusTextField>) {
uiView.text = text
if uiView.window != nil, !uiView.isFirstResponder {
uiView.becomeFirstResponder()
}
}
class Coordinator: NSObject, UITextFieldDelegate {
var parent: AutoFocusTextField
init(_ autoFocusTextField: AutoFocusTextField) {
self.parent = autoFocusTextField
}
func textFieldDidChangeSelection(_ textField: UITextField) {
parent.text = textField.text ?? ""
}
}
}
📦 ResponderChain
I made this small package for cross-platform first responder handling without subclassing views or making custom ViewRepresentables in SwiftUI on iOS 13+
https://github.com/Amzd/ResponderChain
How to apply it to your problem
SceneDelegate.swift
...
// Set the ResponderChain as environmentObject
let rootView = ContentView().environmentObject(ResponderChain(forWindow: window))
...
ContentView.swift
struct ContentView: View {
#EnvironmentObject var chain: ResponderChain
#State var showingTextField = false
#State var text = ""
var body: some View {
return VStack {
if showingTextField {
TextField($text).responderTag("field1").onAppear {
DispatchQueue.main.async {
chain.firstResponder = "field1"
}
}
}
Button(action: { self.showingTextField.toggle() }) {
Text ("Show")
}
}
}
}
In my case I wanted to focused a textfield just right away I used .onappear function
struct MyView: View {
#FocusState private var isTitleTextFieldFocused: Bool
#State private var title = ""
var body: some View {
VStack {
TextField("Title", text: $title)
.focused($isTitleTextFieldFocused)
}
.padding()
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
self.isTitleTextFieldFocused = true
}
}
}
}
As others have noted (e.g. #kipelovets comment on the accepted answer, e.g. #Eonil's answer), I have also not found any of the accepted solutions to work on macOS. I've had some luck, however, using NSViewControllerRepresentable to get a NSSearchField to appear as the first responder in a SwiftUI view:
import Cocoa
import SwiftUI
class FirstResponderNSSearchFieldController: NSViewController {
#Binding var text: String
init(text: Binding<String>) {
self._text = text
super.init(nibName: nil, bundle: nil)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func loadView() {
let searchField = NSSearchField()
searchField.delegate = self
self.view = searchField
}
override func viewDidAppear() {
self.view.window?.makeFirstResponder(self.view)
}
}
extension FirstResponderNSSearchFieldController: NSSearchFieldDelegate {
func controlTextDidChange(_ obj: Notification) {
if let textField = obj.object as? NSTextField {
self.text = textField.stringValue
}
}
}
struct FirstResponderNSSearchFieldRepresentable: NSViewControllerRepresentable {
#Binding var text: String
func makeNSViewController(
context: NSViewControllerRepresentableContext<FirstResponderNSSearchFieldRepresentable>
) -> FirstResponderNSSearchFieldController {
return FirstResponderNSSearchFieldController(text: $text)
}
func updateNSViewController(
_ nsViewController: FirstResponderNSSearchFieldController,
context: NSViewControllerRepresentableContext<FirstResponderNSSearchFieldRepresentable>
) {
}
}
Sample SwiftUI view:
struct ContentView: View {
#State private var text: String = ""
var body: some View {
FirstResponderNSSearchFieldRepresentable(text: $text)
}
}
To fill in this missing functionality, you may install SwiftUIX using Swift Package Manager:
In Xcode, open your project and navigate to File → Swift Packages → Add Package Dependency...
Paste the repository URL (https://github.com/SwiftUIX/SwiftUIX) and click Next.
For Rules, select Branch (with branch set to master).
Click Finish.
Open the Project settings, add SwiftUI.framework to the Linked Frameworks and Libraries, set Status to Optional.
More Info: https://github.com/SwiftUIX/SwiftUIX
import SwiftUI
import SwiftUIX
struct ContentView : View {
#State var showingTextField = false
#State var text = ""
var body: some View {
return VStack {
if showingTextField {
CocoaTextField("Placeholder text", text: $text)
.isFirstResponder(true)
.frame(width: 300, height: 48, alignment: .center)
}
Button(action: { self.showingTextField.toggle() }) {
Text ("Show")
}
}
}
}
SwiftUI
struct ContentView: View {
enum Field {
case firstTextfield
case secondTextfield
case lastTextfield
}
#State private var firstTextfield = ""
#State private var secondTextfield = ""
#State private var lastTextfield = ""
#FocusState private var focusedField: Field?
var body: some View {
VStack {
TextField("Enter anything on first textfield", text: $firstTextfield)
.focused($focusedField, equals: .firstTextfield)
.submitLabel(.next)
TextField("Enter anything on second textfield", text: $secondTextfield)
.focused($focusedField, equals: .secondTextfield)
.submitLabel(.next)
TextField("Enter anything on last textfield", text: $lastTextfield)
.focused($focusedField, equals: .lastTextfield)
.submitLabel(.join)
}
.onSubmit {
switch focusedField {
case .firstTextfield:
focusedField = .secondTextfield
case .secondTextfield:
focusedField = .lastTextfield
default:
focusedField = nil
}
}
}
}
Description: Add an enum with textfields cases, and a property wrapped in a #FocusState with type of that enum. Add focused(_:equals:) modifier to have a binding value, equal to the enum cases. Now, you can change the focusedField to whichever textfield you want to have cursor on, or resign first responder by assigning nil to focusedField.
Not really an answer, just building on Casper's great solution with a convenient modifier -
struct StartInput: ViewModifier {
#EnvironmentObject var chain: ResponderChain
private let tag: String
init(tag: String) {
self.tag = tag
}
func body(content: Content) -> some View {
content.responderTag(tag).onAppear() {
DispatchQueue.main.async {
chain.firstResponder = tag
}
}
}
}
extension TextField {
func startInput(_ tag: String = "field") -> ModifiedContent<TextField<Label>, StartInput> {
self.modifier(StartInput(tag: tag))
}
}
Just use like -
TextField("Enter value:", text: $quantity)
.startInput()
This is a ViewModifier that works with introspect. It works for AppKit MacOS, Xcode 11.5
struct SetFirstResponderTextField: ViewModifier {
#State var isFirstResponderSet = false
func body(content: Content) -> some View {
content
.introspectTextField { textField in
if self.isFirstResponderSet == false {
textField.becomeFirstResponder()
self.isFirstResponderSet = true
}
}
}
}
We have a solution that makes controlling the first responder effortless.
https://github.com/mobilinked/MbSwiftUIFirstResponder
TextField("Name", text: $name)
.firstResponder(id: FirstResponders.name, firstResponder: $firstResponder, resignableUserOperations: .all)
TextEditor(text: $notes)
.firstResponder(id: FirstResponders.notes, firstResponder: $firstResponder, resignableUserOperations: .all)
Selected answer causes some infinite loop issue with AppKit. I don't know about UIKit case.
To avoid that issue, I recommend just sharing NSTextField instance directly.
import AppKit
import SwiftUI
struct Sample1: NSViewRepresentable {
var textField: NSTextField
func makeNSView(context:NSViewRepresentableContext<Sample1>) -> NSView { textField }
func updateNSView(_ x:NSView, context:NSViewRepresentableContext<Sample1>) {}
}
You can use that like this.
let win = NSWindow()
let txt = NSTextField()
win.setIsVisible(true)
win.setContentSize(NSSize(width: 256, height: 256))
win.center()
win.contentView = NSHostingView(rootView: Sample1(textField: txt))
win.makeFirstResponder(txt)
let app = NSApplication.shared
app.setActivationPolicy(.regular)
app.run()
This breaks pure value semantic, but depending on AppKit means you partially abandon pure value semantic and gonna afford some dirtiness. This is a magic hole we need right now for deal with lack of first-responder control in SwiftUI.
As we access NSTextField directly, setting first-responder is plain AppKit way, therefore no visible source of trouble.
You can download working source code here.
I took a little bit different approach - instead of UIViewRepresentable based on UITextField i made it based on UIView and and plug it in SwiftUI view hierarchy with background modifier. Inside UIView i added logic to find first view that canBecomeFirstResponder in subviews and parent views.
private struct FocusableUIView: UIViewRepresentable {
var isFirstResponder: Bool = false
class Coordinator: NSObject {
var didBecomeFirstResponder = false
}
func makeUIView(context: UIViewRepresentableContext<FocusableUIView>) -> UIView {
let view = UIView()
view.backgroundColor = .clear
return view
}
func makeCoordinator() -> FocusableUIView.Coordinator {
return Coordinator()
}
func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<FocusableUIView>) {
guard uiView.window != nil, isFirstResponder, !context.coordinator.didBecomeFirstResponder else {
return
}
var foundRepsonder: UIView?
var currentSuperview: UIView? = uiView
repeat {
foundRepsonder = currentSuperview?.subviewFirstPossibleResponder
currentSuperview = currentSuperview?.superview
} while foundRepsonder == nil && currentSuperview != nil
guard let responder = foundRepsonder else {
return
}
DispatchQueue.main.async {
responder.becomeFirstResponder()
context.coordinator.didBecomeFirstResponder = true
}
}
}
private extension UIView {
var subviewFirstPossibleResponder: UIView? {
guard !canBecomeFirstResponder else { return self }
for subview in subviews {
if let firstResponder = subview.subviewFirstPossibleResponder {
return firstResponder
}
}
return nil
}
}
Here is an example how to use it to make TextField to autofocus (+ bonus utilise #FocusState new iOS 15 api).
extension View {
#ViewBuilder
func autofocus() -> some View {
if #available(iOS 15, *) {
modifier(AutofocusedViewModifiers.Modern())
} else {
modifier(AutofocusedViewModifiers.Legacy())
}
}
}
private enum AutofocusedViewModifiers {
struct Legacy: ViewModifier {
func body(content: Content) -> some View {
content
.background(FocusableUIView(isFirstResponder: isFocused))
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
isFocused = true
}
}
}
#State private var isFocused = false
}
#available(iOS 15, *)
struct Modern: ViewModifier {
func body(content: Content) -> some View {
content
.focused($isFocused)
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
isFocused = true
}
}
}
#FocusState private var isFocused: Bool
}
}
Content view example:
struct ContentView: View {
#State private var text = ""
var body: some View {
VStack {
TextField("placeholder", text: $text)
Text("some text")
}
.autofocus()
}
}
Since Responder Chain is not available to be consumed via SwiftUI, so we have to consume it using UIViewRepresentable.
Do have a look at the below link as I have made a workaround that can work similarly to the way we use to do using UIKit.
https://stackoverflow.com/a/61121199/6445871
It is my variant of the implementation, based on #Mojtaba Hosseini and #Matteo Pacini solutions.
I am still new to SwiftUI, so I won't guarantee the absolute correctness of the code, but it works.
I hope it would be helpful to someone.
ResponderView: It is a generic-responder view, that could be used with any UIKit view.
struct ResponderView<View: UIView>: UIViewRepresentable {
#Binding var isFirstResponder: Bool
var configuration = { (view: View) in }
func makeUIView(context: UIViewRepresentableContext<Self>) -> View { View() }
func makeCoordinator() -> Coordinator {
Coordinator($isFirstResponder)
}
func updateUIView(_ uiView: View, context: UIViewRepresentableContext<Self>) {
context.coordinator.view = uiView
_ = isFirstResponder ? uiView.becomeFirstResponder() : uiView.resignFirstResponder()
configuration(uiView)
}
}
// MARK: - Coordinator
extension ResponderView {
final class Coordinator {
#Binding private var isFirstResponder: Bool
private var anyCancellable: AnyCancellable?
fileprivate weak var view: UIView?
init(_ isFirstResponder: Binding<Bool>) {
_isFirstResponder = isFirstResponder
self.anyCancellable = Publishers.keyboardHeight.sink(receiveValue: { [weak self] keyboardHeight in
guard let view = self?.view else { return }
DispatchQueue.main.async { self?.isFirstResponder = view.isFirstResponder }
})
}
}
}
// MARK: - keyboardHeight
extension Publishers {
static var keyboardHeight: AnyPublisher<CGFloat, Never> {
let willShow = NotificationCenter.default.publisher(for: UIApplication.keyboardWillShowNotification)
.map { ($0.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect)?.height ?? 0 }
let willHide = NotificationCenter.default.publisher(for: UIApplication.keyboardWillHideNotification)
.map { _ in CGFloat(0) }
return MergeMany(willShow, willHide)
.eraseToAnyPublisher()
}
}
struct ResponderView_Previews: PreviewProvider {
static var previews: some View {
ResponderView<UITextField>.init(isFirstResponder: .constant(false)) {
$0.placeholder = "Placeholder"
}.previewLayout(.fixed(width: 300, height: 40))
}
}
ResponderTextField - It is a convenient text-field wrapper around ResponderView.
struct ResponderTextField: View {
var placeholder: String
#Binding var text: String
#Binding var isFirstResponder: Bool
private var textFieldDelegate: TextFieldDelegate
init(_ placeholder: String, text: Binding<String>, isFirstResponder: Binding<Bool>) {
self.placeholder = placeholder
self._text = text
self._isFirstResponder = isFirstResponder
self.textFieldDelegate = .init(text: text)
}
var body: some View {
ResponderView<UITextField>(isFirstResponder: $isFirstResponder) {
$0.text = self.text
$0.placeholder = self.placeholder
$0.delegate = self.textFieldDelegate
}
}
}
// MARK: - TextFieldDelegate
private extension ResponderTextField {
final class TextFieldDelegate: NSObject, UITextFieldDelegate {
#Binding private(set) var text: String
init(text: Binding<String>) {
_text = text
}
func textFieldDidChangeSelection(_ textField: UITextField) {
text = textField.text ?? ""
}
}
}
struct ResponderTextField_Previews: PreviewProvider {
static var previews: some View {
ResponderTextField("Placeholder",
text: .constant(""),
isFirstResponder: .constant(false))
.previewLayout(.fixed(width: 300, height: 40))
}
}
And way to use that.
struct SomeView: View {
#State private var login: String = ""
#State private var password: String = ""
#State private var isLoginFocused = false
#State private var isPasswordFocused = false
var body: some View {
VStack {
ResponderTextField("Login", text: $login, isFirstResponder: $isLoginFocused)
ResponderTextField("Password", text: $password, isFirstResponder: $isPasswordFocused)
}
}
}
Expanding on #JoshuaKifer answer's above, if you're dealing with the navigation animation being glitchy when using Introspect to make a text field first responder. Use this:
import SchafKit
#State var field: UITextField?
TextField("", text: $value)
.introspectTextField { textField in
field = textField
}
.onDidAppear {
field?.becomeFirstResponder()
}
More details on this solution here.
The correct SwiftUI way is to use #FocusState as mentioned above. However this API is available only for iOS 15. If you are using iOS 14 or iOS 13 you can use the Focuser library which is modelled to follow Apple API.
https://github.com/art-technologies/swift-focuser
Here's an example code. You will notice that API looks almost exactly as Apple, however Focuser also offers to use keyboard to move first responder down the chain which is pretty handy.
If you're having any problem with #JoshuaKifer or #ahaze 's response,
I've solved mine by using the modifier on the parent class, instead of on the TextField itself.
What I was doing:
TextField("Placeholder text...", text: $searchInput)
.introspectTextField { textField in
textField.becomeFirstResponder()
}
How I solved my problem:
YourParentStruct(searchInput: $searchInput)
.introspectTextField { textField in
textField.becomeFirstResponder()
}
I'll put the definition of the parent struct below just for clearness
struct YourParentStruct: View {
#Binding var searchInput: String
var body: some View {
HStack {
TextField("Placeholder text...", text: $searchInput)
.padding()
.background(Color.gray)
.cornerRadius(10)
}
}
}
At its Simplest form in iOS 13 ( without using any third party sdk/repo , or if you havent upgraded to iOS 14 to utilise the focus modifiers)
struct CustomTextField: UIViewRepresentable {
func makeUIView(context: Context) -> UITextField {
UITextField(frame: .zero)
}
func updateUIView(_ uiView: UITextField, context: Context) {
uiView.becomeFirstResponder()
}
}
Usage:
struct ContentView : View {
var body: some View {
CustomTextField()
.frame(width: 300, height: 50)
.background(Color.red)
}
}
I know its too late but if it helps anyone this is how I do it.
import SwiftUI
import Introspect
struct MyView: View {
#Binding var text1: String
#Binding var text2: String
#State private var toggleTF: Bool = false
var body: some View {
TextField("TextField 1", text: $text1)
.introspectTextField{ tF in
if toggleTF {
tF.becomeFirstResponder()
}
}
TextField("TextField 2", text: $text1)
.introspectTextField{ tF in
if !toggleTF {
tF.becomeFirstResponder()
}
}
Button("Toggle textfields") {
toggleTF.toggle()
}
}
}
As SwiftUI 2 doesn't support first responders yet I use this solution. It is dirty, but might work for some use cases when you only have 1 UITextField and 1 UIWindow.
import SwiftUI
struct MyView: View {
#Binding var text: String
var body: some View {
TextField("Hello world", text: $text)
.onAppear {
UIApplication.shared.windows.first?.rootViewController?.view.textField?.becomeFirstResponder()
}
}
}
private extension UIView {
var textField: UITextField? {
subviews.compactMap { $0 as? UITextField }.first ??
subviews.compactMap { $0.textField }.first
}
}