在 React 中对输入框内容进行首字母大写处理时，原生受控组件会重置光标到末尾。本文提供基于 selectionStart 和 setSelectionRange() 的可靠解决方案，精准恢复光标位置，确保用户体验流畅。
在 react 中对输入框内容进行首字母大写处理时，原生受控组件会重置光标到末尾。本文提供基于 `selectionstart` 和 `setselectionrange()` 的可靠解决方案，精准恢复光标位置，确保用户体验流畅。
在实现输入首字母自动大写的受控 <input> 组件时，一个常见却容易被忽视的问题是：每次调用 setTitle(value) 更新状态后，React 会重新渲染并同步 value 属性，导致浏览器强制将光标重置到字符串末尾——即使用户只是修改了中间或开头的字符。
根本原因在于：React 受控组件的 value 属性完全接管了输入框的内容，而 DOM 在值变更后不会保留原有光标位置。因此，必须手动捕获并恢复光标（即选区）位置。
✅ 正确解法：捕获 + 延迟恢复光标
核心思路分三步：
-
在
onChange中提前记录当前光标位置（e.target.selectionStart）； -
更新状态后，通过
useEffect在 DOM 更新完成后的下一个微任务中恢复光标； -
使用
ref.current.setSelectionRange(pos, pos)精确设置光标到原位置（注意：setSelectionRange需在真实 DOM 节点上执行，且必须确保 ref 已挂载）。
以下是完整、健壮的实现示例：
import { useState, useRef, useEffect } from 'react';
const capitalizeFirstString = (str) => {
return str && str.charAt(0).toUpperCase() + str.slice(1);
};
export default function TitleInput() {
const [title, setTitle] = useState('');
const [cursorPos, setCursorPos] = useState(0);
const inputRef = useRef(null);
const handleInputChange = (e) => {
const { value, selectionStart } = e.target;
const capitalized = capitalizeFirstString(value);
setTitle(capitalized);
// 仅当输入非空时记录光标；若清空输入，光标自然归 0
setCursorPos(selectionStart);
};
useEffect(() => {
if (inputRef.current && cursorPos !== null) {
// 延迟执行确保 DOM 已更新
inputRef.current.setSelectionRange(cursorPos, cursorPos);
}
}, [cursorPos]);
return (
<input
ref={inputRef}
value={title}
onChange={handleInputChange}
placeholder="Enter title (first letter auto-capitalized)"
style={{ fontSize: '1rem', padding: '6px 10px', border: '1px solid #ccc', borderRadius: '4px' }}
/>
);
}⚠️ 关键注意事项
-
useEffect依赖项必须严格包含cursorPos：避免因闭包捕获旧值导致光标恢复失败； -
不要在
onChange内直接调用setSelectionRange：此时 DOM 尚未更新，操作无效； -
兼容性友好：
setSelectionRange在所有现代浏览器（Chrome、Firefox、Safari、Edge）中均支持； -
边界情况处理：若用户删除全部内容（
value === ''），selectionStart为0，恢复逻辑依然安全；若输入为空字符串，capitalizeFirstString('')返回undefined，建议如上代码中增加str && ...安全检查； -
性能无负担：
useEffect仅在cursorPos变化时触发，且setSelectionRange是轻量 DOM 操作。
✨ 进阶提示（可选）
如需支持多光标场景（如双击选中）、或更复杂的格式化（如单词首字母大写、禁止非字母字符），可结合 selectionEnd、document.execCommand（已废弃，不推荐）或 beforeinput 事件进一步扩展。但对于本例目标——精准维持光标于编辑点——上述方案简洁、可靠、符合 React 最佳实践。
通过主动管理光标状态，你既能实现优雅的文本规范化，又不牺牲用户输入体验。
