当输入为onFocus时设置光标位置？答案

【问题标题】：Set cursor position when input is onFocus?当输入为onFocus时设置光标位置？
【发布时间】：2021-01-29 15:21:27
【问题描述】：

当输入聚焦时，我需要将光标（插入符号）设置为 第一个位置：

我想下面的代码应该可以工作，但事实并非如此。不过，如果它是由单击按钮触发的，它就会起作用。

我做错了什么？

import React, { ChangeEventHandler, useRef, useState } from "react";

const setCaretPosition = (ctrl, pos) => {
  // Modern browsers
  if (ctrl.setSelectionRange) {
    ctrl.focus();
    ctrl.setSelectionRange(pos, pos);
  }
};

export default function App() {
  
  const [value,setValue] = useState("123456789");
  const input_ref = useRef(null);

  const onFocus = () => {
    setCaretPosition(input_ref.current, 0);
  };

  const onChange = (event) => {
    setValue(event.target.value);
  };

  const buttonClick = () => {
    setCaretPosition(input_ref.current, 0);
  };

  return (
    <React.Fragment>
      <div>
        <input 
          type="text" 
          onChange={onChange} 
          value={value} 
          ref={input_ref}
          onFocus={onFocus}
        />
        <button onClick={buttonClick}>Reset cursor</button>
      </div>
    </React.Fragment>
  );
}

【问题讨论】：

使用您的 CodeSandbox 链接，它在 Firefox 中对我来说很好用。我点击文本输入，光标在开头。
奇怪的是你会在用户设置后重新聚焦光标
@epascarello 将出现DD-MM-YYYY 类型的掩码。所以我想确保光标在开头。在移动设备上通常更难选择掩码的确切开头。

标签： javascript html reactjs input onfocus

【解决方案1】：

onFocus 的实际问题与您的代码无关，您的代码似乎将光标放在开头，然后焦点事件将其放回结尾。因此，在焦点结束后推迟代码触发可以解决问题。

我尝试将其放入setTimeout，它立即开始工作。 - 使用您的代码沙箱测试

setTimeout(() => {
      setCaretPosition(input_ref.current as HTMLInputElement, 0);
})

【讨论】：