IOS Bluetooth Keyboard - Inputs - Tab Event

Question

Background: I have a textarea. I capture the Tab key event when the user is typing, and I insert a Tab character (\t) and prevent the browser from focusing on the next input. This works without issue on Mac and PC, on all browsers.

Problem: When using a Bluetooth keyboard attached to an iPad, this doesn't work. The document registers the tab key event, but as soon as I focus on the textarea, all tab key events are ignored and not sent to the browser. I have tested with text inputs as well, and see the same result.

Example: https://plnkr.co/edit/NQvxijj3ISZ0B48fSHvi?p=preview

Simple listener:

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

When you have the body selected (NOT THE TEXTAREA), the tab key event is registered and the number 9 appears. Any other key event appears as well.

When you have the textarea selected, all keydown events are registered on both the body listener and the textarea listener... EXCEPT the tab key.

If anyone has a solution, I would be eternally grateful.

EDIT I have "fixed" the issue by watching for 5 spaces, then converting that to a tab character.

I have researched this and can only figure that iOS does not want to release control of the TAB key when focused on inputs/textareas. I have tried visiting sites like Google Docs to see if they have gotten around it, but they force you to download the App rather than allowing you to edit files inside of Safari on iOS. I am guessing it is because iOS wants to control the tab key entirely. I have tried Chrome on iOS, but it functions the same, so I would say this is not a Safari issue, but an iOS issue.

A possible, but untested, workaround is to code an entire <div> to act like a textarea, and then replace the textarea with the div. Since the tab key works on all other elements, it should in theory work, but it would require quite a bit of Javascript and CSS to make an element act like another.

EDIT 2

I have discovered that using Option+Tab allows the tab key to be captured in the textarea. I don't feel that is satisfactory though. When I am typing a paragraph on a normal keyboard, I don't type Option+Tab, I just type Tab. As far as I can tell there is no way to capture the Tab key alone inside a textarea.

Answer 1

You can try using this library in order to have these events:

• previousbuttonclick
• nextbuttonclick

Then when you detect the element next to textarea is focused you come back to your textarea and insert whatever you want.