#javascript #html #reactjs #input
#javascript #HTML #reactjs #ввод
Вопрос:
У меня есть веб-страница, написанная на React (но она не должна иметь строго отношения к этому вопросу), которая состоит из нескольких входных данных, давайте назовем их именем, фамилией и кодом.
Для быстрой работы вставка кода выполняется с помощью сканера штрих-кода, который работает как внешняя клавиатура. Моя идея заключается в том, что если какое-то поле сфокусировано, нажатие клавиши вставляется в сфокусированный ввод, но в случае, если ввод не сфокусирован, я хочу автоматически сфокусироваться и заполнить вводимый код.
Есть ли способ сделать это легко?
Комментарии:
1. Вы хотите вручную сфокусировать ввод в обязательном порядке? нравится использовать ссылку?
Ответ №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> Ответ №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;
}
Очевидно, вам нужно будет оценить, имеет ли нажатая клавиша значение, которое вы можете добавить к вводу, но я думаю, это должно дать вам представление о том, что делать. Я не пробовал это, так что это может не сработать полностью.
Также: я не уверен, что это самый эффективный способ, но это вариант.
РЕДАКТИРОВАТЬ: ответ Костаса лучше 😉 за исключением null …вы должны использовать undefined