SwiftUI TextField自定义代理与Binding绑定失效及格式化需求

方案一：兼容自定义UITextFieldDelegate（保留Introspect） #

使用Introspect设置自定义代理后，SwiftUI默认事件传递会被拦截，需要在代理方法中手动同步Binding值，确保.onChange正常触发：

1. 自定义代理类，持有Binding弱引用避免循环引用：

class FormattedTextFieldDelegate: NSObject, UITextFieldDelegate {
    weak var textBinding: Binding<String>?
    
    init(textBinding: Binding<String>) {
        self.textBinding = textBinding
        super.init()
    }
    
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        guard let currentText = textField.text, let binding = textBinding else { return true }
        
        // 清理已有格式，合并新输入内容
        let cleanedText = currentText.replacingOccurrences(of: ":", with: "") + string
        // 生成每两位加冒号的格式化文本
        let formattedText = cleanedText.enumerated().reduce("") { result, element in
            let (index, char) = element
            var newResult = result + String(char)
            if (index + 1) % 2 == 0 && index + 1 != cleanedText.count {
                newResult += ":"
            }
            return newResult
        }
        
        // 异步更新Binding，避免视图更新冲突
        DispatchQueue.main.async {
            binding.wrappedValue = formattedText
        }
        // 手动设置文本，避免代理拦截后显示异常
        textField.text = formattedText
        return false // 已手动处理文本，返回false跳过系统默认逻辑
    }
}

2. 在View中配置代理并保留.onChange：

struct ContentView: View {
    @State private var inputString = ""
    
    var body: some View {
        TextField("输入内容", text: $inputString)
            .introspectTextField { textField in
                textField.delegate = FormattedTextFieldDelegate(textBinding: $inputString)
            }
            .onChange(of: inputString) { newValue in
                print("内容更新为：\(newValue)")
                // 此处逻辑会正常触发
            }
    }
}

方案二：不使用Introspect，直接处理Binding避免无限循环 #

核心是区分用户输入和程序自动格式化的更新，避免触发无限循环：

方法1：自定义Binding #

用原始值存储未格式化内容，自定义Binding负责格式转换：

struct ContentView: View {
    @State private var rawInput = "" // 存储无格式的原始内容
    private var formattedBinding: Binding<String> {
        Binding(
            get: {
                // 从原始值生成带冒号的格式化文本
                rawInput.enumerated().reduce("") { result, element in
                    let (index, char) = element
                    var newResult = result + String(char)
                    if (index + 1) % 2 == 0 && index + 1 != rawInput.count {
                        newResult += ":"
                    }
                    return newResult
                }
            },
            set: { newValue in
                // 从格式化文本提取原始内容，仅当内容变化时更新
                let cleaned = newValue.replacingOccurrences(of: ":", with: "")
                if cleaned != rawInput {
                    rawInput = cleaned
                }
            }
        )
    }
    
    var body: some View {
        TextField("输入内容", text: formattedBinding)
            .onChange(of: rawInput) { newValue in
                print("原始内容更新为：\(newValue)")
                // 监听原始值变化，不会触发循环
            }
    }
}

方法2：在onChange中添加判断逻辑 #

直接在.onChange里处理格式化，通过条件判断避免无限循环：

struct ContentView: View {
    @State private var inputString = ""
    
    var body: some View {
        TextField("输入内容", text: $inputString)
            .onChange(of: inputString) { newValue in
                // 清理已有格式，重新生成格式化文本
                let cleaned = newValue.replacingOccurrences(of: ":", with: "")
                let formatted = cleaned.enumerated().reduce("") { result, element in
                    let (index, char) = element
                    var newResult = result + String(char)
                    if (index + 1) % 2 == 0 && index + 1 != cleaned.count {
                        newResult += ":"
                    }
                    return newResult
                }
                // 仅当格式化结果与当前值不同时更新，避免循环触发
                if formatted != inputString {
                    inputString = formatted
                }
            }
    }
}

注意事项 #

• 光标位置：方案一可以在代理方法中额外计算光标偏移量，保证输入时光标位置正确；方案二的原生TextField光标会自动跳到末尾，若需精确控制推荐方案一。
• 输入限制：可在处理逻辑中添加字符类型过滤（如仅允许数字），避免非法输入。

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