Tab navigation stopped when virtual keyboard hidden

[Jiguro]

Hi,
thanks for working on this jQuery keyboard, it is of great use!

I started using it recently and have observed that when an input field's virtual keyboard is triggered by another element, then tab-key navigation only works when the virtual keyboard is open. If the virtual keyboard is closed, it is not possible to tab away from the concerned input field.

This can be reproduced with the following code example:

<form>
      <input type="text" tabindex="1"/><br>
      <input type="text" tabindex="2"/><span class="keyboard_trigger">Click here!</span><br>
      <input type="text" tabindex="3"/><span class="keyboard_trigger">Click here!</span><br>
      <input type="text" tabindex="4"/>
</form>

$(document).ready(function () {
    $('.keyboard_trigger').on('click', function () {
        var input = $(this).prev('input');

        if (!input.hasClass('ui-keyboard-input')) {
            input.keyboard({
                layout: 'num',
                usePreview: false,
                autoAccept: true,
                tabNavigation: true,
                openOn: null
            });
        }

        input.getkeyboard().focusOn();
        return false;
    });
});

The cause seems to be inside function

base.switchInput = function(goToNext, isAccepted){... // line 869

where in the particular situation above, 3 attributes generate an "undefined" error:

• base.$keyboard.hide
• base.$keyboard.show
• kb.options.openOn

Is there maybe another setting option I missed out that would prevent this tabbing "undefined" error for the way I trigger the keyboard from a sibling element?

With kind regards and many thanks,

jiguro

[Mottie]

Hi @Jiguro!

When a keyboard is closed (pressing escape, or shift-enter) focus is lost on that input, so the tab indexing won't be in sequence. Which is why the switchInput code was written. It should find the next visible input, textarea, input or link and switch focus to it.

Here is a demo.

You might also want to check out this donation form demo which adds a prev & next button to switch inputs.

These demos and many others can be found on the wiki home page

[apod42]

Hello,

I am facing the same problem as jiguro.

Here is a demo: http://jsfiddle.net/Em8sG/3024/

Tab navigation only works with the keyboard opened. If the keybord is closed, pressing tab does nothing...

[apod42]

Mottie, in the demos you provided, the keyboard is triggered when the user clicks inside the input. It always remains opened, so the problem does not appear. Please see my demo, with the keyboard triggered by clicking on an image.

[Mottie]

Hi @apod42!

I just pushed a fix for this into the working branch. Thanks for sharing a demo of this issue!

[Mottie]

Ok, this should be fixed in 1.19.0. Thanks for your patience!