ReactJS 自动模拟键盘

Question

请有人帮助我，在 codesandbox link 这里 codesandboxlink 你可以看到 2 种输入类型的文本，我想要在第二个输入中，当你聚焦并按下“退格键”键时光标指针会自动聚焦到第一个输入，谢谢你的帮助，希望你有美好的一天

Answer 1

你需要做的是监听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>
  );
}

ReactJS 自动模拟键盘

ReactJS automatically simulate keyboard

keyboard

frontend

input

simulate

reactjs

实例