To add a character length limit to a TextField in SwiftUI, you can use a combination of Swift’s .onChange, .onPasteCommand modifier, and string manipulation to limit the number of characters the user can enter.
The .onPasteCommand modifier in SwiftUI allows you to handle content pasted into a TextField directly. You can use this modifier to intercept and manage the pasted content before it actually gets added to the TextField. This way, you can enforce the character limit when the user pastes text.
Here’s how to use .onChange and .onPasteCommand to limit the pasted text:
import SwiftUI
struct ContentView: View {
@State private var text: String = ""
let characterLimit = 20 // Set your desired character limit
var body: some View {
VStack {
TextField("Insert text here...", text: $text)
.padding()
.background(Color.white)
.cornerRadius(10)
.shadow(radius: 3)
.padding(.horizontal)
.onChange(of: text) { newValue in
// Enforce character limit while typing
if newValue.count > characterLimit {
text = String(newValue.prefix(characterLimit))
}
}
.onPasteCommand(of: [.plainText]) { items in
// Handle paste event and enforce character limit
if let pastedText = items.first?.string {
let newText = text + pastedText
if newText.count > characterLimit {
// Limit the pasted content to fit within the character limit
text = String(newText.prefix(characterLimit))
} else {
text = newText
}
}
}
Text("\(text.count)/\(characterLimit) characters") // Optional: Shows character count
.font(.footnote)
.foregroundColor(text.count > characterLimit ? .red : .gray)
.padding(.top, 5)
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Explanation:
.onPasteCommand(of: [.plainText]):- This modifier intercepts the paste command. It ensures that only plain text is handled when pasting into the
TextField. - Inside this block, you can access the pasted content and modify it before it’s added to the
TextField.
- This modifier intercepts the paste command. It ensures that only plain text is handled when pasting into the
- Handle the pasted content:
- When the user pastes text, it gets appended to the current value of
text. - The pasted content is checked against the character limit, and if the combined length (existing + pasted) exceeds the limit, the text is truncated to fit within the limit.
- When the user pastes text, it gets appended to the current value of
- Fallback to
onChangefor typing:- The
onChangemodifier still ensures the limit is enforced while typing.
- The
This approach ensures that you can handle pasting specifically while still enforcing the character limit. The user won’t be able to exceed the specified character limit when pasting long text nor when typing.
