本文介绍在 React 中实现输入框首字母自动大写时，避免光标跳转到末尾的完整解决方案，通过 ref + useEffect + setSelectionRange() 精确控制光标位置。
本文介绍在 react 中实现输入框首字母自动大写时，避免光标跳转到末尾的完整解决方案，通过 `ref` + `useeffect` + `setselectionrange()` 精确控制光标位置。
在 React 受控组件中，对输入值（如 setTitle(value)）进行实时转换（例如首字母大写）会导致 DOM 重渲染，浏览器默认将光标重置到输入框末尾——这是常见却易被忽视的 UX 问题。根本原因在于：React 更新 value 后，浏览器无法自动还原用户编辑时的光标位置。
解决思路是捕获变更前的光标位置，并在状态更新后主动恢复。具体分三步：
-
捕获位置：在
onChange事件中，读取e.target.selectionStart并存入状态（如cPos）； -
同步更新：调用
setTitle()触发重新渲染； -
恢复光标：利用
useEffect监听cPos变化，在 DOM 更新后通过ref.current.setSelectionRange(cPos, cPos)将光标精准定位回原位置。
以下是可直接运行的完整示例代码：
import { useState, useRef, useEffect } from 'react';
const capitalizeFirstString = (str) =>
str ? str.charAt(0).toUpperCase() + str.slice(1) : '';
const TextInputWithCapitalize = () => {
const [title, setTitle] = useState('');
const [cursorPos, setCursorPos] = useState(0);
const inputRef = useRef(null);
const handleInputChange = (e) => {
const rawValue = e.target.value;
const capitalized = capitalizeFirstString(rawValue);
setTitle(capitalized);
// 关键：保存变更前的光标位置（注意：此时 DOM 尚未更新）
setCursorPos(e.target.selectionStart);
};
// 光标恢复逻辑：仅在 title 更新且 ref 可用时执行
useEffect(() => {
if (inputRef.current && cursorPos !== null) {
inputRef.current.setSelectionRange(cursorPos, cursorPos);
}
}, [cursorPos]);
return (
<input
ref={inputRef}
value={title}
onChange={handleInputChange}
placeholder="输入文字（首字母自动大写）"
style={{ fontSize: '16px', padding: '8px', width: '300px' }}
/>
);
};
export default TextInputWithCapitalize;✅ 关键注意事项：
-
setSelectionRange()必须在 DOM 渲染完成后调用，因此需放在useEffect中（依赖cursorPos），而非onChange内部； - 若输入为空字符串（
""），capitalizeFirstString("")返回""，不会报错，但需确保charAt(0)安全调用（已通过空值判断处理）； - 不建议在
onChange中直接操作ref.current.selectionStart—— 此时 DOM 尚未更新，强行设置可能被后续 React 渲染覆盖； - 如需支持多光标场景（如选中文本后替换），可扩展为保存
selectionStart和selectionEnd，并使用setSelectionRange(start, end)恢复选区。
该方案轻量、可靠，适用于所有需要“无感格式化”的受控输入场景（如邮箱自动补全、数字千分位、大小写标准化等）。
