当前位置：首页 > news >正文

React 受控输入框光标跳到末尾:格式化输入时的 selection 丢失 bug 与修复

news 2026/7/31 13:08:58

React 受控输入框光标跳到末尾:格式化输入时的 selection 丢失 bug 与修复

做过手机号、银行卡号、金额千分位这类输入框的人多半遇到过:你在字符串中间改一个字,光标「啪」地跳到了最后。用户想在第 3 位后面插个数字,结果每敲一下光标就弹到末尾,体验极差。这不是浏览器的锅,是受控组件在格式化时把光标位置弄丢了。这篇讲清楚原因和几种修法。

先复现这个 bug

一个给数字加千分位逗号的输入框,朴素写法长这样:

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,是为了在浏览器绘制前就恢复,避免用户看到光标闪一下:

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)时格式化一次。输入过程中光标行为完全交给浏览器,自然不会跳:

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:

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":

<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"。