React中实现textarea失焦时光标回到起始位置的问题

你在onBlur回调中直接调用setSelectionRange(0, 0)无效的核心原因是：当blur事件触发时，textarea已经失去焦点，此时对选区的修改操作不会被浏览器执行。

可行解决方案 #

• 方案一：利用setTimeout延迟执行选区设置
  将选区设置操作推迟到事件循环的下一轮，此时浏览器已完成失焦的基础处理，但仍允许修改选区状态：

  import { useRef } from "react";
  
  export default function App() {
    const textareaRef = useRef(null);
  
    const handleBlur = () => {
      setTimeout(() => {
        textareaRef.current?.setSelectionRange(0, 0);
      }, 0);
    };
  
    return (
      <div className="App">
        <textarea
          ref={textareaRef}
          onBlur={handleBlur}
          rows={5}
          defaultValue="测试文本，失焦后光标回到开头"
        />
      </div>
    );
  }
  

• 方案二：临时重新聚焦后设置选区
  如果方案一在部分浏览器不生效，可以先手动让textarea聚焦，设置选区后再主动失焦（注意可能会有短暂的聚焦闪烁）：

  const handleBlur = () => {
    const el = textareaRef.current;
    if (!el) return;
    
    el.focus();
    el.setSelectionRange(0, 0);
    el.blur();
  };
  

原理说明 #

setTimeout(..., 0)会将回调放入宏任务队列，等待当前blur事件的所有同步处理完成后再执行，此时浏览器仍能识别对textarea选区的修改；而临时聚焦的方式则是强制让元素处于可修改选区的状态，完成设置后再恢复失焦状态。

内容的提问来源于stack exchange，提问作者Adam Ridhwan