React 受控输入框光标跳到末尾:格式化输入时的 selection 丢失 bug 与修复
做过手机号、银行卡号、金额千分位这类输入框的人多半遇到过:你在字符串中间改一个字,光标「啪」地跳到了最后。用户想在第 3 位后面插个数字,结果每敲一下光标就弹到末尾,体验极差。这不是浏览器的锅,是受控组件在格式化时把光标位置弄丢了。这篇讲清楚原因和几种修法。
先复现这个 bug
一个给数字加千分位逗号的输入框,朴素写法长这样:
jsx
function AmountInput() {
const [value, setValue] = useState("");
const handleChange = (e) => {
// 去掉旧逗号,重新按三位加逗号
const raw = e.target.value.replace(/,/g, "");
const formatted = raw.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
setValue(formatted);
};
return <input value={value} onChange={handleChange} />;
}功能是对的:输入 1234567 会显示 1,234,567。但只要你把光标放在中间编辑------比如在 1,234 的 2 后面插入 9------光标立刻跳到字符串末尾。在长输入里这几乎没法用。
为什么光标会跳
关键在于受控组件的渲染机制。当你在中间输入时,发生了这样一串事:
- 你在位置 3 敲了一个键,浏览器先把值更新、光标停在位置 4。
onChange触发,你在里面setValue(formatted),而且formatted因为重新加逗号,长度可能和 DOM 里当前的值不一样。- React 重新渲染,把
input.value整个替换成新的formatted字符串。 - 当 React 用 setter 重写
input.value时,浏览器会把光标默认放到字符串末尾------因为它不知道你原本想停在哪。
所以根因是:React 重写了整个 value,但没有恢复光标位置(selectionStart/selectionEnd)。只要新旧字符串长度一致,你可能感觉不到;一旦格式化改变了长度(加/删逗号),光标就明显乱跳。
核心:受控 input 每次 setState 都会整体替换 value,而替换 value 会重置光标到末尾。想让光标待在原处,必须自己记录并恢复 selection。
修法一:记录并恢复光标位置
在改值前记下光标位置,渲染后再用 useLayoutEffect 把它设回去。用 useLayoutEffect 而不是 useEffect,是为了在浏览器绘制前就恢复,避免用户看到光标闪一下:
jsx
import { useState, useRef, useLayoutEffect } from "react";
function AmountInput() {
const [value, setValue] = useState("");
const inputRef = useRef(null);
const cursorRef = useRef(null); // 存下要恢复的光标位置
const handleChange = (e) => {
const el = e.target;
const oldValue = el.value;
const oldPos = el.selectionStart; // 格式化前的光标位置
const raw = oldValue.replace(/,/g, "");
const formatted = raw.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
// 关键:算出格式化后光标该在哪。
// 用「光标左边有几个数字」来定位,不受逗号增删影响
const digitsBeforeCursor = oldValue.slice(0, oldPos).replace(/,/g, "").length;
let newPos = 0, seen = 0;
for (; newPos < formatted.length; newPos++) {
if (/\d/.test(formatted[newPos])) seen++;
if (seen === digitsBeforeCursor) { newPos++; break; }
}
cursorRef.current = newPos;
setValue(formatted);
};
// 渲染后、绘制前恢复光标,避免闪烁
useLayoutEffect(() => {
if (cursorRef.current != null && inputRef.current) {
inputRef.current.setSelectionRange(cursorRef.current, cursorRef.current);
cursorRef.current = null;
}
});
return <input ref={inputRef} value={value} onChange={handleChange} />;
}思路是用「光标左边有多少个数字」作为锚点,而不是原始字符下标。因为逗号会增删,字符下标不可靠;但「左边有几个数字」在格式化前后是稳定的。渲染后遍历新字符串,找到「第 N 个数字之后」的位置,把光标设回去。
修法二:非受控 + 只在失焦时格式化
如果不想处理光标逻辑,一个务实的取巧办法是:输入时不格式化,只在失焦(blur)时格式化一次。输入过程中光标行为完全交给浏览器,自然不会跳:
jsx
function AmountInput() {
const [value, setValue] = useState("");
return (
<input
value={value}
onChange={(e) => setValue(e.target.value.replace(/,/g, ""))} // 输入时只存纯数字
onBlur={(e) => {
// 离开输入框时才加逗号,此时光标跳末尾无所谓
const raw = e.target.value.replace(/,/g, "");
setValue(raw.replace(/\B(?=(\d{3})+(?!\d))/g, ","));
}}
/>
);
}代价是输入过程中看不到实时的千分位。但对很多表单来说,这个体验完全可接受,而且代码简单、零光标 bug。能接受「失焦才格式化」时,优先用这个方案,别为了实时格式化背上一堆光标恢复逻辑。
修法三:直接用成熟库
金额、手机号、日期这类掩码输入是通用需求,已经有把光标问题处理干净的库,别自己造轮子。比如 react-number-format:
jsx
import { NumericFormat } from "react-number-format";
function AmountInput() {
const [value, setValue] = useState("");
return (
<NumericFormat
value={value}
thousandSeparator="," // 千分位
onValueChange={(v) => setValue(v.value)} // v.value 是纯数字,v.formattedValue 带逗号
/>
);
}这类库内部已经做了 selection 保存与恢复,还处理了粘贴、删除、前导零等一堆边界。生产项目里除非有特殊定制需求,直接上库最稳。
一个容易忽略的坑:type 得是 text
想给数字加逗号,<input> 的 type 必须是 text ,不能是 type="number"。因为 type="number" 的输入框里塞非数字字符(逗号)会被浏览器判为非法值,selectionStart 还会返回 null,上面的光标逻辑直接崩。需要唤起数字键盘就用 inputMode="numeric":
jsx
<input type="text" inputMode="numeric" value={value} onChange={handleChange} />小结
- 光标跳末尾的根因:受控组件 setState 会整体替换
input.value,而替换 value 会让浏览器把光标默认重置到末尾。 - 修法一(要实时格式化) :改值前记
selectionStart,用「光标左边的数字个数」当锚点算出新位置,useLayoutEffect里setSelectionRange恢复。 - 修法二(可接受失焦格式化) :输入时存纯值,
onBlur才格式化,零光标逻辑,首选。 - 修法三(生产项目) :直接用
react-number-format等成熟库,边界都替你处理好了。 - 格式化输入框
type一定用text+inputMode="numeric",别用type="number"。
记忆点:受控 input 一旦在 onChange 里改变 value 长度,就必须自己保存并恢复光标------否则它永远跳到末尾。