Остановить ввод от потери фокуса при нажатии виртуальной клавиатуры

Question

Я создал пользовательскую виртуальную клавиатуру для приложения киоска. Проблема в том, что каждый раз, когда вы нажимаете на клавиши клавиатуры, поле ввода теряет фокус. Любая помощь будет оценена.

Answer 1

Вы можете переместить фокус обратно, как только вход теряет фокус при щелчке на виртуальной клавиатуре.

let input = document.getElementById('input')
input.focus() // focus on input on page load

function handleInput (key) {
 input.value += key // add key value to input
}

<button onclick="handleInput('a')">a</button>
<button onclick="handleInput('b')">b</button>
<button onclick="handleInput('c')">c</button>

<input onfocusout="this.focus()" id="input"/> <!-- focus on input back on onfocusout ie. when user click elsewhere -->

Ввод всегда в фокусе.

Answer 2

Предотвращает фокусировку элемента, затем возвращает фокус на нужное поле.

$('#div').on('mousedown', function(event) {
   event.preventDefault();
   $('#field').focus();
});