Question

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

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

有什么方法可以轻松做到吗？

Answer 1

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>

Answer 2

const surnameInput = document.getElementById('surname-input');
... (= do for all inputs)

let activeInput;

surnameInput.onFocus = () => { activeInput = surnameInput };
...

surnameInput.OnBlur = () => { activeInput = undefined };
...

document.addEventListener('keypress', (ev) => {
    const input = activeInput ?? codeInput;
    input.value += valueOftheKey;
}

您显然必须评估按下的键是否具有可以添加到输入中的值，但我认为这应该让您知道该怎么做。不过我还没有尝试过，所以它可能不会完全奏效。

另外：我不确定这是否是最有效的方式，但它是一种选择。

编辑：Kostas 的回答更好 ;) 除了 null...你应该使用 undefined

如何为输入按键设置默认输入？

2 个答案: