Swift：实现TextField输入小数点替换为逗号及键盘适配方案

我实现了一个带数字键盘的TextField：

struct DecimalKeyboardView: View {
@Binding var value: Double
var placeholder: String
var formatter: NumberFormatter

var body: some View {
    VStack(spacing: 0) {
        TextField(placeholder, value: $value, formatter: formatter)
        .keyboardType(.decimalPad)
        .multilineTextAlignment(.leading)
    }
  }
}

由于部分地区的数字键盘默认显示小数点“.”作为分隔符，我希望将输入的“.”强制替换为逗号“,”，比如输入23.3要显示成23,3。

我尝试配置了NumberFormatter，但输入23.3后，TextField显示的是23,0：

struct NumForm {

// Currency format (VALUE)
static let formatterCurr: NumberFormatter = {
    let formatter = NumberFormatter()
    formatter.numberStyle = .decimal
    formatter.minimumFractionDigits = 2
    formatter.maximumFractionDigits = 2
    formatter.decimalSeparator = ","
    formatter.groupingSeparator = "."
    formatter.zeroSymbol = ""
    return formatter
}()
}

请问有没有办法强制数字键盘只显示逗号分隔符？或者有没有其他可行的TextField输入格式化方案？

1. 修复NumberFormatter解析异常 #

你遇到的23.3变成23,0的问题，核心是Formatter默认会优先用设备系统区域解析输入，而非你设置的decimalSeparator。调整Formatter配置，指定对应区域并允许解析两种分隔符即可：

struct NumForm {
static let formatterCurr: NumberFormatter = {
    let formatter = NumberFormatter()
    formatter.numberStyle = .decimal
    formatter.minimumFractionDigits = 2
    formatter.maximumFractionDigits = 2
    // 指定使用逗号作为小数点的区域（比如德语区）
    formatter.locale = Locale(identifier: "de_DE")
    formatter.groupingSeparator = "."
    formatter.zeroSymbol = ""
    // 允许同时识别小数点和逗号作为分隔符
    formatter.decimalSeparator = ","
    formatter.secondaryGroupingSeparator = "."
    return formatter
}()
}

2. 强制键盘显示逗号 #

iOS系统的decimalPad键盘分隔符由设备系统区域决定，无法直接修改键盘上的符号，但有两种间接实现方式：

方式一：临时切换App区域 #

在使用TextField的页面初始化时，临时将App的区域设置为使用逗号做小数点的区域，键盘会自动切换显示逗号：

struct DecimalKeyboardView: View {
@Binding var value: Double
var placeholder: String
var formatter: NumberFormatter

init(value: Binding<Double>, placeholder: String, formatter: NumberFormatter) {
    self._value = value
    self.placeholder = placeholder
    self.formatter = formatter
    // 临时设置App区域为德语区（逗号作为小数点）
    Locale.current = Locale(identifier: "de_DE")
}

var body: some View {
    VStack(spacing: 0) {
        TextField(placeholder, value: $value, formatter: formatter)
        .keyboardType(.decimalPad)
        .multilineTextAlignment(.leading)
    }
  }
}

注意：这种方式会影响整个App的区域相关展示（比如日期、货币格式），需根据业务场景评估是否适用。

方式二：自定义数字键盘 #

如果不想修改系统区域，完全自定义一个带逗号的数字键盘是最灵活的方案：

// 自定义键盘视图
struct CustomDecimalKeyboard: View {
    @Binding var text: String
    
    var body: some View {
        VStack(spacing: 12) {
            ForEach(0..<3) { row in
                HStack(spacing: 12) {
                    ForEach(0..<3) { col in
                        let num = row * 3 + col + 1
                        KeyButton(text: "\(num)") { text.append("\(num)") }
                    }
                }
            }
            HStack(spacing: 12) {
                KeyButton(text: ",") {
                    guard !text.contains(",") else { return }
                    text.append(",")
                }
                KeyButton(text: "0") { text.append("0") }
                KeyButton(text: "⌫") {
                    guard !text.isEmpty else { return }
                    text.removeLast()
                }
            }
        }
        .padding()
    }
}

// 键盘按键组件
struct KeyButton: View {
    var text: String
    var action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(text)
                .font(.title)
                .frame(width: 80, height: 80)
                .background(Color(UIColor.systemGray5))
                .cornerRadius(12)
        }
    }
}

然后修改DecimalKeyboardView，绑定文本并处理格式转换：

struct DecimalKeyboardView: View {
    @Binding var value: Double
    var placeholder: String
    @State private var displayText = ""
    
    var body: some View {
        VStack(spacing: 0) {
            TextField(placeholder, text: $displayText)
                .keyboardType(.numberPad) // 用纯数字键盘，避免系统小数点
                .multilineTextAlignment(.leading)
                .onChange(of: displayText) { newValue in
                    // 将逗号转成小数点，同步到绑定的Double值
                    let processed = newValue.replacingOccurrences(of: ",", with: ".")
                    value = Double(processed) ?? 0
                }
                .onAppear {
                    // 初始化时将Double转为带逗号的文本
                    let formatter = NumberFormatter()
                    formatter.locale = Locale(identifier: "de_DE")
                    formatter.minimumFractionDigits = 2
                    formatter.maximumFractionDigits = 2
                    displayText = formatter.string(from: NSNumber(value: value)) ?? ""
                }
            CustomDecimalKeyboard(text: $displayText)
        }
    }
}

3. 实时替换输入的小数点为逗号 #

如果不想改动键盘或系统区域，最轻便的方案是监听输入文本，实时把.替换成,, 同时同步值到绑定的Double：

struct DecimalKeyboardView: View {
    @Binding var value: Double
    var placeholder: String
    let formatter: NumberFormatter
    @State private var displayText = ""
    
    var body: some View {
        VStack(spacing: 0) {
            TextField(placeholder, text: $displayText)
                .keyboardType(.decimalPad)
                .multilineTextAlignment(.leading)
                .onChange(of: displayText) { newValue in
                    // 实时替换小数点为逗号
                    let replacedText = newValue.replacingOccurrences(of: ".", with: ",")
                    if replacedText != newValue {
                        displayText = replacedText
                    }
                    // 将带逗号的文本转成Double，同步到绑定值
                    let parsedText = replacedText.replacingOccurrences(of: ",", with: ".")
                    value = Double(parsedText) ?? 0
                }
                .onAppear {
                    // 初始化显示文本
                    displayText = formatter.string(from: NSNumber(value: value)) ?? ""
                }
        }
    }
}

这种方案对原有代码改动最小，适合大多数场景。

内容的提问来源于stack exchange，提问作者SPR