reactjs - ReactJS 自动模拟键盘
问题描述
请有人帮帮我,在这里的代码和框链接中,您可以看到 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>
);
}
现场示例
推荐阅读
- java - 这两个代码示例中的哪一个应该更快?
- javascript - 堆叠卡片效果:拖动时将 zIndex 更改为所有相似 div 中的最高值
- asp.net-mvc - 使用 nopcommerce 4.10 ,如何从类别折扣中排除某些产品?
- firebase - 如何在 Kotlin 中使用位图
- javascript - 如何将此 Curl 调用转换为 Javascript/React?
- python - 导出标准化图像而不重新转换?
- kubernetes - 如何覆盖 RabbitMQ 用户和密码(k8s)?
- javascript - TypeError:分配给常量变量。React.js 钩子
- r - 忽略表中超出范围的下标
- solr - solr DIH:由其他字段组成的字段