Клавиатура 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);
});
};
Пожалуйста, проверьте, он должен работать. Пример