reactjs - 将光标重置到 <textarea> React 的开头

Question

我有一个要创建的 react 文本区域，并且我希望光标在失去焦点时从头开始。我该如何解决这个问题？

代码沙盒:https://codesandbox.io/s/affectionate-tu-2cd6j6?file=/src/App.js

``

export default function App() {
  const textareaRef = useRef();
  return (
    <div>
      <textarea
        ref={textareaRef}
        id="my-text-area"
        defaultValue={"Hello World!"}
        rows="2"
        tabIndex="-1"
        style={{ resize: "none", overflow: "hidden" }}
        onBlur={() => textareaRef.current.setSelectionRange(0, 0)}
      ></textarea>
    </div>
  );
}

尝试将 onblur 函数与 setSelectionRange 一起使用，但由于某种原因不起作用。

Answer 1

对您的代码进行了一些操作，似乎您在更改选择范围后缺少focus()调用。

onBlur={() => {
  textareaRef.current.setSelectionRange(0, 0);
  textareaRef.current.focus();
}}

然后，光标将出现在文本区域内容的开头。

https://codesandbox.io/s/suspicious-tdd-r8t77j?file=/src/App.js