如何在textformfield onchange值上修剪文本

Posted 2023-03-07

【中文标题】如何在textformfield onchange值上修剪文本

【英文标题】：How to trim text on textformfield onchange value

【发布时间】：2019-09-12 08:49:05

【问题描述】：

我想在值更改时修剪 TextFormField 上的文本，以便用户输入名称。用户只允许输入全名，单词之间没有额外的空格。 （例如：我的名字 Isromeo）

我已经在使用 TextEditingController 但仍然无法正常工作。这是我的sn-p代码来实现我的目标

final myController = TextEditingController();

...

return new TextFormField(
      onChanged: (value)
        myController..text = value.trim()
          ..selection = TextSelection.collapsed(offset: myController.text.length);
      ,
      controller: myController,
      keyboardType: TextInputType.phone,
      style: FormStyles.inputStyles(),
      decoration: InputDecoration(
        focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Color(0xFFCACCCF))),
        hintText: 'hint',
        contentPadding: EdgeInsets.only(bottom: 8),
        hintStyle: FormStyles.hintStyles(),
        enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Color(0xFFCACCCF)),),
        errorStyle: FormStyles.errorStyles(),
      ),
    );

如果我只输入空格，上面的代码可以正常工作，但是在我在第一个单词之后输入空格后，光标会移动到第一个字符。有什么建议吗？

提前致谢！

【参考方案1】：

您可以使用BlacklistingTextInputFormatter 输入文本，因为您想忽略RegExp。

      TextFormField(
        decoration: InputDecoration(
            labelText: "Title",
        ),
        inputFormatters: [
          BlacklistingTextInputFormatter(RegExp("[ ]"))
        ],
      )

更多内容可以参考：https://api.flutter.dev/flutter/services/TextInputFormatter-class.html

【讨论】：

感谢您的回复@Amit，我已经尝试过您的解决方案，但我无法在单词之间添加空格。

你的意思是你想要像这样的“Myname Isromeo”，你不想让用户输入那个名字的开头和结尾的空格吗？

是的，但您的解决方案无法在 Myname 和 Isromeo 之间添加空格

我尝试过使用 trim onChance 的案例，它和你一样，光标问题。

是的，顺便说一句，感谢您的回复。当我找到解决方案时，我会更新/发布。谢谢！

【参考方案2】：

所以我有了自己的解决方案，也许不是最好的，但至少它可以完美运行！ 我决定创建自己的输入格式化程序并使用RegExp 来实现我的目标。 这是我的自定义格式化程序

class NameInputFormatter extends TextInputFormatter
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) 

    if(newValue.text.length > 0)
      TextEditingValue textEditingValue = newValue.copyWith(
          text: newValue.text.replaceAll(new RegExp(r"\s+"), ' ')
      );

      return TextEditingValue(
        text: textEditingValue.text,
        selection: TextSelection.collapsed(
          offset: textEditingValue.text.length,
        ),
      );
    

    return newValue;

  

如果您有更好的解决方案，请告诉我。谢谢！