Есть ли способ предотвратить размытие фокуса от элемента, когда пользователь щелкает небольшое пространство между клавишами виртуальной клавиатуры javascript mottie?

У меня есть простое веб-приложение, и у меня возникают проблемы с виртуальной клавиатурой mottie в определенной ситуации.

Мой экран имеет ряд полей. Если пользователь щелкает одно из текстовых полей (к каждому текстовому полю привязана виртуальная клавиатура), функция фокусировки скрывает другие элементы на странице и увеличивает текущее поле/метку.

Виртуальная клавиатура отлично работает в этом состоянии. Когда я ввожу текст, затем нажимаю «Принять» или щелкаю область за пределами прямоугольника виртуальной клавиатуры, фокус размывается, клавиатура исчезает, и снова отображаются все поля.

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

Я надеялся, что есть какой-то параметр виртуальной клавиатуры, который сделает любую неключевую часть виртуальной клавиатуры мертвой зоной для кликов, но я не смог его найти. У кого-нибудь есть опыт в этом? Спасибо!


javascript html virtual-keyboard
person rando_9999    schedule 09.12.2019    source источник
comment
В обработчике onclick/mousedown для клавиатуры добавьте e.stopPropagation(), и это предотвратит получение события щелчка любыми содержащими или базовыми одноуровневыми элементами.   -  person Jacob Penney    schedule 09.12.2019
comment
Пожалуйста, укажите ошибку в скрипке или что-то в этом роде. Мы не можем помочь вам только кучей текста, пока мы пытаемся выяснить, что за код, возможно, используется...   -  person Red    schedule 09.12.2019

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите вернуть фокус на текстовое поле, попробуйте что-то вроде этого (демонстрация ):

$(function() {
  $('#keyboard').keyboard({
      visible: function(e, keyboard, el) {
        keyboard.$keyboard.on('mousedown', function() {
          setTimeout(function() {
            keyboard.$preview.focus();
          }, 100);
        });
      }
    });
});

Я начал с того, что сделал это по «щелчку», но он не фокусировался до тех пор, пока мышь не была отпущена. Я не уверен, почему вы видите, что все исчезает (может быть, настройка CSS :active?), но это может почти немедленно восстановить фокус.

person Mottie    schedule 21.12.2019