Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript - iPad Tab Key Detection w/ Bluetooth Keyboard

I have a text field where users can type data. They can use the tab key and then the field gets indented. This works great on everything except ios with a bluetooth keyboard.

If I visit http://www.rapidtables.com/tools/notepad.htm, I can tab on my desktop/laptop. But on my iPad... no dice.

If I visit https://api.jquery.com/keydown/, https://api.jquery.com/keyup/, https://api.jquery.com/keypress/ ... NONE of them detect the tab key on iPad.

The tab key works in ios native applications, like Notes, and the tab key does navigate between fields inside a webpage. Is there a way to detect the tab key in Javascript that anyone knows of?

EDIT

Here is a fiddle I threw together so you can see the code and problem in action: https://jsfiddle.net/9jv0bmbx/1/ Basically I am just checking that e.keyCode===9 which works on desktop/laptops. On iPads, it registers EVERY key except the tab key.

like image 212
Tim Withers Avatar asked May 09 '16 17:05

Tim Withers


1 Answers

EDIT2:

Here is another option for a solution. I found an article that goes over how to capture ALL events. Below is a jsfiddle, and here is the article I found this concept. Note that in the jsfiddle I return the original addEventListener because what you need has been done after adding a blank listener.

jsfiddle

var oldAddEventListener = EventTarget.prototype.addEventListener;

EventTarget.prototype.addEventListener = function(eventName, eventHandler)
{
  oldAddEventListener.call(this, eventName, function(event) {
      if(event.target.id === "textarea" && event.keyCode===9){
        event.preventDefault();
        $(this).val($(this).val()+"\t");
        $("#log").append("<li>Tab Pressed</li>");
      }
    eventHandler(event);
  });
};
$("#textarea").keydown(function(e) {

});

EventTarget.prototype.addEventListener = oldAddEventListener;

EDIT:

The test keyboard here captures the tab keydown. Look into this library, it should fix your issues. Either use the library directly, or figure out how it captures the tab on iOS by digging through the code. http://dmauro.github.io/Keypress/

There is some sort of hardware/function key issue getting in the way of a normal tab key press. Pressing OPTION+Tab will fire your handler like normal. Perhaps there is some sort of setting that is causing this, but obviously you cannot expect your users to change their settings to use your app. You may be able to find some way to leverage this somehow, but it appears that this is the default behavior and you are stuck with it.

It might be possible to detect iOS devices and figure out some sort of override for the tab's default behavior. Or you may be able to capture the focusOut, or blur events and detect if it was not caused by the mouse.

like image 174
RayfenWindspear Avatar answered Oct 27 '22 00:10

RayfenWindspear