文本框首字母转大写后光标跳至末尾问题求助

问题根源在于每次通过setTitle更新状态时，输入框会重新渲染，光标默认回到末尾。要兼顾首字母大写功能和正常的光标体验，需要手动控制光标位置，同时区分用户的编辑场景。

具体解决方案 #

核心思路 #

1. 用useRef获取输入框DOM元素，直接操作光标位置
2. 记录用户编辑时的光标位置，状态更新后再恢复对应位置
3. 优化首字母大写逻辑，避免无意义的状态更新（比如首字母已经大写时，不再重复触发更新）

完整代码示例 #

import { useRef, useState, useEffect } from 'react';

function YourComponent() {
  const [title, setTitle] = useState('');
  const inputRef = useRef(null);
  const lastCursorPos = useRef(0);

  // 仅当首字母为小写时转换，减少不必要的状态更新
  const capitalizeFirstString = (str) => {
    if (!str) return str;
    return str.charAt(0).toUpperCase() + str.slice(1);
  };

  const textOnChange = (e) => {
    const input = e.target;
    // 记录当前光标位置
    lastCursorPos.current = input.selectionStart;
    const originalValue = input.value;
    const newValue = capitalizeFirstString(originalValue);

    // 值未变化时不更新状态，避免触发渲染
    if (newValue === originalValue) return;

    setTitle(newValue);
  };

  // 状态更新后调整光标位置
  useEffect(() => {
    if (!inputRef.current) return;
    const input = inputRef.current;
    let cursorPos = lastCursorPos.current;

    // 处理首字母被自动大写的场景：如果光标在首字母位置，保持位置不变
    if (cursorPos === 1 && title.charAt(0) !== title.slice(1).charAt(0)) {
      cursorPos = 1;
    }
    input.selectionStart = cursorPos;
    input.selectionEnd = cursorPos;
  }, [title]);

  return (
    <input
      ref={inputRef}
      type="text"
      value={title}
      onChange={textOnChange}
    />
  );
}

export default YourComponent;

关键细节说明 #

• Ref的作用：通过inputRef直接访问输入框DOM，确保能精准设置光标位置
• 避免冗余更新：判断首字母是否需要转换，只有真正需要修改时才更新状态，减少不必要的DOM渲染
• 光标位置适配：根据用户的编辑位置调整光标：
  • 用户修改首字母时，光标保持在首字母之后
  • 用户在字符串中间/末尾编辑时，光标停留在原位置，不会跳至末尾

内容的提问来源于stack exchange，提问作者Unnikrishnan S