当输入为onFocus时设置光标位置?

Question

我需要设置光标(插入符号)在第一个位置，当输入集中:

CodeSandbox

我猜下面的代码应该是工作的，但它不是。但是，如果它是由点击按钮触发的，则可以工作。

我做错了什么?

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>
);
}

Answer 1

onFocus的实际问题不是你的代码，似乎你的代码把光标放在开始，然后焦点事件把它放回结束。因此，在焦点将光标置于结束位置后推迟代码触发可以解决此问题。

我试着把它放在setTimeout，它马上开始工作。-测试你的代码沙箱

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