输入 onFocus 时设置光标位置?
Set cursor position when input is onFocus?
我需要将光标(插入符号)设置到 输入焦点时的第一个位置:
我想下面的代码应该可以工作,但实际上没有。不过,如果它是由单击按钮触发的,它会起作用。
我做错了什么?
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>
);
}
onFocus 的实际问题与您的代码无关,您的代码似乎将光标放在开头,然后 focus 事件将其放回到结尾。因此,在焦点将光标置于末尾后推迟代码触发可以解决问题。
我尝试将其放入 setTimeout
,它立即开始工作。 - 使用您的代码沙箱进行测试
setTimeout(() => {
setCaretPosition(input_ref.current as HTMLInputElement, 0);
})
我需要将光标(插入符号)设置到 输入焦点时的第一个位置:
我想下面的代码应该可以工作,但实际上没有。不过,如果它是由单击按钮触发的,它会起作用。
我做错了什么?
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>
);
}
onFocus 的实际问题与您的代码无关,您的代码似乎将光标放在开头,然后 focus 事件将其放回到结尾。因此,在焦点将光标置于末尾后推迟代码触发可以解决问题。
我尝试将其放入 setTimeout
,它立即开始工作。 - 使用您的代码沙箱进行测试
setTimeout(() => {
setCaretPosition(input_ref.current as HTMLInputElement, 0);
})