问题描述
请有人帮帮我,在这里的codesandboxlink的codesandBox链接中,您可以看到2种输入类型的文本,我想在第二种输入中,当您聚焦并按“退格”键时,光标指针将自动聚焦在第一次输入中,感谢您的帮助,希望您过得愉快
解决方法
您需要做的是监听onKeyDown
事件。事件触发时,它将传递KeyboardEvent
参数,您可以使用该参数检查按下的键以及其他相关信息。在这种情况下,您将需要寻找KeyboardEvent.keyCode
。键入时记录键码将显示您刚刚按下的键的键码。
<input
type="text"
onKeyDown={(e) => {
console.log('pressing',e.keyCode)
}
}}
/>
此后,您需要获取input
的引用才能有条件地集中输入。
export default function Demo() {
const onKeyDown = (e) => {
const BACKSPACE_KEY = 8;
const ENTER_KEY = 13;
const form = e.target.form;
const index = Array.prototype.indexOf.call(form,e.target);
let el;
if (e.keyCode === ENTER_KEY) {
el = form.elements[index + 1];
} else if (e.keyCode === BACKSPACE_KEY) {
el = form.elements[index - 1];
}
if (el) el.focus();
e.preventDefault();
};
return (
<form>
<input type="text" onKeyDown={onKeyDown} />
<input type="text" onKeyDown={onKeyDown} />
<input type="text" onKeyDown={onKeyDown} />
<input type="text" onKeyDown={onKeyDown} />
<input type="text" onKeyDown={onKeyDown} />
</form>
);
}