React iOS端TextInput编辑时光标自动跳转至末尾问题求解

问题根因 #

你在fieldChange函数里直接修改了e.target.value，这种直接操作DOM输入框值的行为，在iOS Safari下会触发浏览器默认的光标重置逻辑，自动把光标跳转至文本末尾。另外你的执行顺序也存在逻辑缺陷：先调用handleChange保存原始值，再修改e.target.value做格式化，会导致formData里存储的还是未格式化的内容，输入框显示值和状态值不一致。

修复方案 #

步骤1：重写fieldChange函数，返回格式化后的值而非直接修改DOM #

const fieldChange = (value: string, lowercase = false, removeSpaces = false, removeSpecialChars = false) => {
  if (!value) return value
  let formattedValue = value
  if (lowercase) {
    formattedValue = formattedValue.toLowerCase()
  }
  if (removeSpaces) {
    // 原写法只替换第一个空格，改为全局正则匹配所有空格
    formattedValue = formattedValue.replace(/\s/g, '')
  }
  if (removeSpecialChars) {
    formattedValue = formattedValue.replace(/[^a-zA-Z0-9]/g, '')
  }    
  return formattedValue
}

步骤2：修改onChange逻辑，手动记录并恢复光标位置 #

<TextInput
  id="website"
  name="website"
  placeholder="Enter a link / website"
  type="url"
  label="link/website"
  error={linkError}
  autoCapitalize="none"
  autoCorrect="off"
  onChange={(e) => {
    setlinkError('');
    const input = e.target;
    // 记录当前光标位置
    const cursorPosition = input.selectionStart;
    // 原始输入值
    const originalValue = input.value;
    // 获取格式化后的值
    const formattedValue = fieldChange(originalValue, true, true, false);
    // 计算格式化后光标应该停留的位置：如果格式化删除了光标前的字符，位置对应前移
    const deletedCharsBeforeCursor = originalValue.slice(0, cursorPosition).length - formattedValue.slice(0, cursorPosition).length;
    const newCursorPosition = cursorPosition - deletedCharsBeforeCursor;
    // 直接更新格式化后的内容到表单状态
    setFormData({
      ...formData,
      [input.name]: formattedValue
    });
    // 等待DOM更新完成后手动恢复光标位置
    requestAnimationFrame(() => {
      input.selectionStart = input.selectionEnd = newCursorPosition;
    });
    // 直接传格式化后的值做校验，无需操作DOM
    validateLink({ value: formattedValue });
  }}
  isPublic={false}
  // 改为受控组件，绑定value保证输入框和状态完全同步
  value={formData.website || ''}
/>

额外优化说明 #

1. 将原来的非受控组件（使用defaultValue）改为受控组件（绑定value属性），彻底避免输入框显示值和状态值不一致的问题
2. 给输入框添加autoCapitalize="none"、autoCorrect="off"属性，禁用iOS系统自带的首字母大写、自动纠错逻辑，减少不必要的输入干扰
3. validateLink函数可进一步优化为直接接收字符串值参数，无需依赖DOM元素

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