CODEWITHSUNDEEP
iosswiftuitextfieldplaceholder
Mark Meretzky
Mark Meretzky

Reputation: 99

Missing placeholder for iOS SwiftUI TextField that inputs an Int

I would like my iOS SwiftUI TextField to display the placeholder "Enter an integer:", but the TextField displays 0 (the value of the var value). The placeholder "Enter an integer:" does appear when the user deletes the 0. How can I get the placeholder "Enter an integer:" to appear without making the user delete the 0 first? Thank you in advance. Xcode 11.6 on macOS Catalina 10.15.6.

struct ContentView: View {
    @State private var value: Int = 0;
    @State private var text: String = "";
    
    var body: some View {
        VStack {
            TextField(
                "Enter an integer:",
                value: $value,
                formatter: NumberFormatter(),
                onCommit: {self.text = "The product is \(2 * self.value).";}
            )
            .keyboardType(.numbersAndPunctuation)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            
            Text(text)
        }
        .padding([.leading, .trailing], 16)
    }
}

Upvotes: 2

Views: 1323

Answers (2)

Asil ARSLAN
Asil ARSLAN

Reputation: 1136

We need to use formatter to show placeholder.

Our formatter should have formatter.zeroSymbol = ""

let numberFormatter: NumberFormatter = {
    let formatter = NumberFormatter()
    formatter.numberStyle = .none
    formatter.zeroSymbol  = ""
    return formatter
}()

Using formatted:

TextField("Enter an integer:", value: $value, formatter: numberFormatter)
                    .keyboardType(.numbersAndPunctuation)

Happy Coding :)

Upvotes: 5

Asperi
Asperi

Reputation: 257503

To give placeholder with formatted TextField we need to use optional value holder.

Here is a fixed variant

demo

struct ContentView: View {
    @State private var value: Int?
    @State private var text: String = ""

    var body: some View {
        VStack {
            TextField(
                "Enter an integer:",
                value: $value,
                formatter: NumberFormatter(),
                onCommit: {self.text = "The product is \(2 * (self.value ?? 0)).";}
            )
            .keyboardType(.numbersAndPunctuation)
            .textFieldStyle(RoundedBorderTextFieldStyle())

            Text(text)
        }
        .padding([.leading, .trailing], 16)
    }
}

Upvotes: 3

Related Questions