Xcode 15中SwiftUI TextField的.insert(_:at:)方法失效问题

算力阿峰

2026-7-8

Xcode 15中TextField格式化信用卡号时insert方法失效的修复方案

你的代码问题出在索引不匹配和逻辑冲突上，加上Xcode15对应iOS17+的SwiftUI TextField绑定逻辑调整，直接导致原方式失效。

原代码的核心问题

你在遍历原始输入值的同时，一边拼接字符到cardNumber，一边用原始输入的索引去插入空格——但cardNumber的长度会随着插入空格不断变化，原始输入的索引和cardNumber的实际索引完全不匹配，插入位置必然错误。
Xcode15的SwiftUI对TextField的绑定更新做了优化，这种逐字符操作且依赖旧索引的逻辑，会和TextField内部的文本更新机制冲突，导致格式化失效。

修复后的实现方案

换一种更稳妥的思路：先过滤所有非数字字符，再重新构建带空格分隔的字符串，完全避开索引操作的坑：

struct ContentView: View {
    @State private var cardNumber: String = ""
    
    var body: some View {
        TextField("XXXX XXXX XXXX XXXX", text: .init(get: {
            cardNumber
        }, set: { newValue in
            // 第一步：过滤掉所有非数字字符，只保留卡号数字
            let pureDigits = newValue.filter { $0.isNumber }
            var formattedCardNumber = ""
            
            // 第二步：每4位数字添加一个空格分隔
            for (index, digit) in pureDigits.enumerated() {
                formattedCardNumber.append(digit)
                // 每4位后加空格，但最后一组数字末尾不加
                if (index + 1) % 4 == 0 && index != pureDigits.count - 1 {
                    formattedCardNumber.append(" ")
                }
            }
            
            cardNumber = formattedCardNumber
        }))
        .padding()
        .keyboardType(.numberPad) // 建议开启数字键盘，减少非数字输入
    }
}