Когда я программно фокусируюсь на входе флажка (<input type="checkbox" id="onscreen-kb" name="onscreen-kb">), вызывая метод focus() элемента, он не отправляет событие фокуса, чтобы указать, что он получил фокус, и не показывает контур фокуса.
Однако элемент фактически находится в фокусе - по крайней мере, на каком-то уровне. document.activeElement равно element. Пробел включает и выключает его.
Переход к флажку с помощью клавиши Tab вместо программной фокусировки вызывает появление контура фокуса, но флажок по-прежнему не генерирует событие фокуса, когда он получает фокус.
Пока что пробовал только на MacOS. Ошибка возникает только в Chrome. Firefox и Safari не проблема. Введите text поля ввода и отображают контуры фокуса, и генерируют события фокуса через programmati c focusing.
Когда я гуглию этот топ c, все, что я нахожу, - это много вещей от людей, которым не нравится контуры фокуса на флажках, и кто хочет их скрыть. Это не моя проблема. Я пытаюсь сделать так, чтобы экранная клавиатура выполняла табуляцию точно так же, как настоящая клавиатура, когда мое приложение работает в режиме киоска.
Кто-нибудь знает, как улучшить работу этих флажков? Чтобы усилить идею о том, что они должны генерировать события фокуса при выполнении input.addEventListener('focus'...)?
Обновление: вот пример того, о чем я говорю:
function focused(e) {
document.getElementById("output").innerHTML += (this.id + " focused") + "<br>";
}
$("#onscreen-kb").on("focus", focused);
$("#onscreen-kb2").on("focus", focused);
function focus1() {
document.getElementById("onscreen-kb").focus();
}
function focus2() {
document.getElementById("onscreen-kb2").focus();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="onscreen-kb" name="onscreen-kb">
<input type="checkbox" id="onscreen-kb2" name="onscreen-kb"><br>
<button onclick="focus1()">focus 1</button>
<button onclick="focus2()">focus 2</button>
<br>
<div id="output">
</div>