Flutter Web自定义提示文本控制器输入字符重复问题排查

问题根源 #

Flutter Web的文本输入系统和原生Android存在核心差异：Web端依赖浏览器输入框实现，当自定义TextEditingController直接修改text属性时，浏览器已同步用户输入的字符，controller的二次修改会导致字符被重复追加。同时Web端焦点事件触发时机与原生不同，错误的焦点状态处理会加剧重复输入问题。

解决方案 #

1. 改用TextEditingValue而非直接修改text属性 #

直接修改text会触发TextEditingController全量更新，Web端浏览器此时已完成用户输入同步，进而导致重复。正确做法是通过value属性更新，同时严格维护selection和composing范围：

// 错误示例：直接修改text
controller.text = newText;

// 正确示例：更新TextEditingValue
controller.value = controller.value.copyWith(
  text: newText,
  selection: TextSelection.collapsed(offset: newText.length),
  composing: TextRange.empty, // 用户输入时清空composing；提示文本则设置对应范围
);

2. 用composing范围标记提示文本 #

对于Copilot式提示文本，需将提示内容标记为composing范围，让Web端浏览器识别这部分是待确认的补全内容，不会将其视为用户输入的一部分：

void updateWithSuggestion(String userInput, String suggestion) {
  final fullText = userInput + suggestion;
  controller.value = controller.value.copyWith(
    text: fullText,
    selection: TextSelection.collapsed(offset: userInput.length),
    composing: TextRange(start: userInput.length, end: fullText.length),
  );
}

用户继续输入时，composing范围内的提示文本会被自动替换，避免重复叠加。

3. 焦点状态校验 #

更新controller前，检查输入框焦点状态，确保仅在焦点激活时执行更新，避免焦点变化引发的重复输入事件：

final focusNode = FocusNode();

// 更新文本前判断
if (focusNode.hasFocus) {
  // 执行controller更新逻辑
}

4. 过滤Web端重复输入事件（可选） #

若上述方法仍有问题，可通过TextField的onChanged回调在Web端过滤重复输入：

TextField(
  controller: customController,
  onChanged: (value) {
    if (kIsWeb) {
      // 对比controller当前值与输入值，避免重复处理
      if (customController.text != value) {
        // 执行自定义逻辑
      }
    } else {
      // 原生端逻辑
    }
  },
)

验证修改 #

修改后按以下流程测试：

• 输入字符触发提示文本显示
• 继续输入新字符，确认文本框内容无重复
• 测试提示文本的确认/取消逻辑，确保Web端与原生端行为一致

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