Клавиатура Bluetooth IOS - Входы - вкладка Событие

Фон: У меня есть текстовое поле. Я захватываю событие Key Tab, когда пользователь печатает, и я вставляю символ Tab (\ t) и не позволяю браузеру сфокусироваться на следующем входе. Это работает без проблем на Mac и ПК во всех браузерах.

Проблема: При использовании клавиатуры Bluetooth, прикрепленной к iPad, это не работает. Документ регистрирует событие ключа табуляции, но как только я сосредоточусь на текстовом поле, все события клавиш табуляции игнорируются и не отправляются в браузер. Я также тестировал текстовые входы и видел тот же результат.

Пример: https://plnkr.co/edit/NQvxijj3ISZ0B48fSHvi?p=preview

Простой слушатель:

$(function(){
  $("body").bind("keydown",function(e){
    $("#bodyLog").append($("<div/>").html(e.keyCode));
    return e.preventDefault();
  });
});

Когда вы выбрали тело (NOT THE TEXTAREA), событие клавиши табуляции зарегистрировано и появится номер 9. Также появляется любое другое ключевое событие.

Когда вы выбрали текстовое поле, все события смены ключа регистрируются как на слушателе тела, так и на слушателе textarea... ИСКЛЮЧАЕТ клавишу табуляции.

Если у кого есть решение, я буду вечно благодарен.

ИЗМЕНИТЬ Я "исправил" проблему, наблюдая за 5 пробелами, а затем преобразуя ее в символ табуляции.

Я исследовал это и могу только понять, что iOS не хочет освобождать контроль над клавишей TAB, если сосредоточиться на входах /textareas. Я пробовал посещать такие сайты, как Google Docs, чтобы узнать, обошли ли они его, но они заставляют вас загружать приложение, а не разрешать вам редактировать файлы внутри Safari на iOS. Я предполагаю, что это потому, что iOS хочет полностью контролировать ключ табуляции. Я пробовал Chrome на iOS, но он работает одинаково, поэтому я бы сказал, что это не проблема Safari, а проблема iOS.

Возможным, но непроверенным, обходным путем является кодирование целого <div>, действующего как текстовое поле, а затем заменяющего textarea на div. Поскольку ключ табуляции работает на всех других элементах, он должен теоретически работать, но для создания элемента как другого требуется довольно много JavaScript и CSS.

РЕДАКТИРОВАТЬ 2

Я обнаружил, что использование Option + Tab позволяет захватить ключ табуляции в текстовом поле. Я не чувствую, что это удовлетворительно. Когда я набираю абзац на обычной клавиатуре, я не набираю Option + Tab, я просто набираю Tab. Насколько я могу судить, нет способа захватить клавишу Tab только внутри текстового поля.

Ответ 1

Вы можете использовать эту библиотеку, чтобы иметь эти события:

previousbuttonclick
nextbuttonclick

Затем, когда вы обнаруживаете, что элемент рядом с textarea сфокусирован, вы возвращаетесь в свое текстовое поле и вставляете все, что хотите.

Ответ 2

Я считаю, что это известная проблема с вкладками в iOS. Я нашел аналогичный question в stackoverflow. Просто добавьте этот хак перед кодом:

var oldAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(eventName, eventHandler){
  oldAddEventListener.call(this, eventName, function(e) {
      if(e.target.id === "textarea" && e.keyCode===9){
        e.preventDefault();
      }
    eventHandler(e);
  });
};

Пожалуйста, проверьте, он должен работать. Пример