如何在TextField中仅隐藏指定文本、保留分隔横杠不做掩码

问题原因 #

Flutter原生的obscureText属性会将输入框内的所有字符统一替换为隐藏圆点，不会区分你通过格式化插入的分隔横杠和用户输入的数字，所以会出现全星号的情况。

解决方案 #

不需要引入额外依赖，只要把原生的obscureText属性去掉，自己实现文本掩码逻辑，分离真实输入值和展示值即可，改动很小：

1. 先定义两个变量存储真实社保号和输入控制器：

// 存储用户输入的真实社保号数字
String _realSsn = '';
final TextEditingController _textController = TextEditingController();

2. 在初始化阶段给控制器添加监听，自动做掩码转换：

@override
void initState() {
  super.initState();
  _textController.addListener(() {
    // 提取输入内容里的所有数字，存为真实值
    _realSsn = _textController.text.replaceAll(RegExp(r'[^0-9]'), '');
    // 生成掩码文本：所有数字替换为*，保留分隔横杠
    final maskedText = _textController.text.replaceAll(RegExp(r'[0-9]'), '*');
    // 避免无限触发监听，只有文本不一致时才更新展示内容
    if (_textController.text != maskedText) {
      final currentSelection = _textController.selection;
      _textController.value = _textController.value.copyWith(
        text: maskedText,
        selection: currentSelection,
      );
    }
  });
}

3. 修改你的TextField代码，移除obscureText: true：

TextField(
  decoration: InputDecoration(
    hintText: 'XXX-XX-XXXX',
  ),
  controller: _textController,
  keyboardType: TextInputType.number,
  inputFormatters: [MaskTextInputFormatter(mask: '###-##-####')],
)

注意事项 #

后续需要提交社保号时，直接取_realSsn的值即可，不要用_textController.text，后者是带星号和分隔符的展示值。

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