时间戳

首页 > 解决方案 > 如何设置输入按键的默认输入？

javascript - 如何设置输入按键的默认输入？

问题描述

我有一个用 React 编写的网页（但它不应该与那个问题严格相关），它由几个输入组成，我们称它们为 Name、Surname 和 Code。

为了快速工作，代码的插入是通过用作外部键盘的条码扫描仪完成的。我的想法是，如果某个字段被聚焦，则按键被插入到聚焦输入中，但是，如果没有输入聚焦，我想自动聚焦并填充代码输入。

有没有办法轻松做到这一点？

标签： javascripthtmlreactjsinput

解决方案

let inputName = document.querySelector('input[name="name"]');
let inputSurname = document.querySelector('input[name="surname"]');
let inputCode = document.querySelector('input[name="code"]');

let focusedInput = null;

[inputName, inputSurname, inputCode].forEach((input) => {
  input.addEventListener('blur', () => {
    focusedInput = null;
  });
  input.addEventListener('focus', () => {
    focusedInput = input;
  });
});

document.body.addEventListener('keypress', () => {
  if (focusedInput == null) {
    inputCode.focus();
  }
});
<div>
  <label>Name</label>
  <input type="text" name="name" />
</div>
<div>
  <label>Surname</label>
  <input type="text" name="surname" />
</div>
<div>
  <label>Code</label>
  <input type="text" name="code" />
</div>

推荐阅读