解决Flutter输入框限制最大输入长度时,从中间输入会自动截取掉后面的内容

一、问题原由

当限制输入框最大输入长度时,将光标移动到中间输入,当输入的内容长度加上已经输入内容的长度大于限制的输入长度时,Flutter会将光标后面的内容进行截取掉;而当我在原生Android上验证时却是自动截取输入的内容原有的内容不动。

  • 上面文字可能太抽象了,可以看下面的Flutter和Android的效果对比
  • 可以看到输入同样的内容在原生上只能输入一个而在Flutter上却可以都输入进去

二、虽然Flutter提供了maxLengthEnforcement属性,但是好像也是没有什么用;这里通过自定义Formatter来实现和原生一样效果

CupertinoTextField(
  placeholder: '监听输入的内容',
  inputFormatters: [
    LengthLimitingTextInputFormatter(10),
  ],
),
  • 自定义LengthLimitingTextInputFormatter
class AndroidLengthLimitingFormatter extends LengthLimitingTextInputFormatter {
  AndroidLengthLimitingFormatter(int maxLength) : super(maxLength);

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    int oldLength = oldValue.text.length;
    int newLength = newValue.text.length;
    ///1、当第一次输入|输入长度未达到限制长度|删除内容时 不需要进行处理
    if (oldLength == 0 || newLength <= maxLength || oldLength > newLength) {
      return super.formatEditUpdate(oldValue, newValue);
    }
    ///2、获取到当前输入了哪些内容
    var inputStr = newValue.text.substring(
        oldValue.selection.baseOffset, newValue.selection.baseOffset);
    ///3、根据限制的长度截取输入的内容
    var cutStr = inputStr.substring(0, maxLength - oldLength);
    ///4、在光标位置插入截取的内容
    return oldValue.replaced(
      TextRange(
          start: oldValue.selection.baseOffset,
          end: oldValue.selection.baseOffset),
      cutStr,
    );
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Code-Porter

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值