flutter TextField实现手机号3 4 4格式输入（同理银行卡号格式输入）

最近flutter项目登录页面，手机号输入有要求是131 1111 1111输入格式。之前实现方法是使用TextField输入框，加上输入格式化的属性inputFormatters实现。然鹅呢，空格是加上了，光标位置一直在文本后，这样呢就导致在手机号中部删除或编辑，光标都会跳到文本的末尾。为了解决这个问题呢，就对inputFormatters具体实现方法做了一下改进：

inputFormatters: [
  //格式化输入内容
  TextInputFormatter.withFunction((oldValue, newValue) {
    String text = newValue.text;
    String positionStr =
        (text.substring(0, newValue.selection.baseOffset))
            .replaceAll(RegExp(r"\s+\b|\b\s"), "");//获取光标左边的文本
    //计算格式化后的光标位置
    int length = positionStr.length;
    if (length <= 3) {
      position = length;
    } else if (length <= 7) {
      position = length + 1;
    } else if (length <= 11) {
      position = length + 2;
    } else {
      position = 13;
    }
    //这里格式化整个输入文本
    text = text.replaceAll(RegExp(r"\s+\b|\b\s"), "");
    String string = "";
    for (int i = 0; i < text.length; i++) {
      if (i > 10) {
        break;
      }
      if (i == 3 || i == 7) {
        if (text[i] != " ") {
          string = string + " ";
        }
      }
      string = string + text[i];
    }
    text = string;
    return TextEditingValue(
      text: text,
      selection: TextSelection.fromPosition(TextPosition(
          offset: position, affinity: TextAffinity.upstream)),
    );
  }),
  //限制输入文本长度
  LengthLimitingTextInputFormatter(13)
]

OK，这样成功解决了在中部编辑号码时，光标会后跳的问题。

下面顺便提一下发现的一个问题啊，那就是TextField设置keyboardType属性为visiblePassword时，并且obscureText为false（默认false），在IOS手机上还是能切换成中文输入法。

所以当obscureText可以为false的话，只能同过inputFormatters属性来限制输入中文啦：

inputFormatters: [

FilteringTextInputFormatter.allow(RegExp(
“[a-zA-Z]|[0-9]”)), //只能输入字母或数字
LengthLimitingTextInputFormatter(maxLength),//最大长度
]

OK！Over！