Is there a way to open the keyboard on focus + delay?

[pablodgonzalez]

I have a form when tabs navigation, when the textbox is focused I would like wait a prudential time to open the keyboard, so the user has time to navigate to the next control.

however for now I have another problem, when the keyboard close the focus goes to the first control.

[Mottie]

Hi @pablodgonzalez!

You'll need to set the openOn option to an empty string, then use the 'reveal` method to show the keyboard after a delay (demo). Personally, I don't think that makes for a good user interface because the user may not be expecting the keyboard to open, or may want to see it immediately.

I'm not sure what you mean by the focus goes to the first control on keyboard close, but you can modify the behavior by giving focus to another element inside of the beforeClose callback.

$(function() {
  $("#keyboard")
    .keyboard({
      openOn: "",
      beforeClose: function(e, keyboard, el, accepted) {
        // change focus here
      }
    })
    .addTyping({
      showTyping: true,
      delay: 250
    });

  var timer;
  var delay = 1000; // ms to wait before opening the keyboard
  $("#keyboard").on("focus blur", function(event) {
    clearTimeout(timer);
    if (event.type === "focus") {
      timer = setTimeout(function() {
        $("#keyboard").getkeyboard().reveal();
      }, delay);
    }
  });
});

[pablodgonzalez]

@Mottie Thanks!! I'm building an UI where the navigation is only with left, up, right, down and enter. All navigation is defined with tabindex attributes (it is 'cause still works with an external keyboard). However, when the keyboard close the focus goes to "document" tabindex=0. (I don't know why 🤷‍♂️) I got your advice and thank you very much for the quick answer.

[pablodgonzalez]

I found the issue with the blur/focus. https://github.com/Mottie/Keyboard/blob/1db48e9519d932f6e869f0eaaab29868fa47ff6a/js/jquery.keyboard.js#L1738-L1739 After the beforeClose event triggers, the function caret is executed, inside it the focus is returned to the $preview. https://github.com/Mottie/Keyboard/blob/1db48e9519d932f6e869f0eaaab29868fa47ff6a/js/jquery.keyboard.js#L3440-L3444 So, the caret function has a parameter "noFocus", I'm not sure about how it could be used.

[pablodgonzalez]

Somethings else, when the usePreview is true, the focus goes to the preview element (in my case it breaks the navigation, and there is no problem i can fix it) but the important thing is that the preview element has a tabindex="-1" so, when get the focus the next focus goes to 0. I suspect there is the problem with the navigation. So, for now, my navigation works, but with pressing tab doesn't.

[Mottie]

Sorry for not getting back to you sooner.

If you're going to only use keyboard navigation, then I wouldn't set the usePreview option because it adds a new element into the flow.

The caret noFocus parameter is used by the initialFocus option to prevent the use of .focus() on the element. I don't think setting it will help in this case.

Is there anything you think I need to change in the plugin to fix the switching of focus on keyboard close? I've tried not to mess with the focus after close as it would break the functionality of the tabNavigation and enterNavigation settings.

[pablodgonzalez]

@Mottie Don't worry, I share you the config that I'm using now.

beforeVisible: function() {
  KEYWORD_ACTIVE = true;
  currentFocus = $(':focus');
},
beforeClose: function() {
  KEYWORD_ACTIVE = false;
  currentFocus.focus();
}

And comment the line //$keyboard.caret(base.$preview, base.last, true); in keyboard.js the KEYWORD_ACTIVE is just a flag for another thing in the code (the keypress for navigation) Let me thank you again for you excellent work.

[pablodgonzalez]

Ok I got it!!!

beforeVisible: function() {
  KEYWORD_ACTIVE = true;
  currentFocus = $(':focus');
},
hidden: function() {
  KEYWORD_ACTIVE = false;
  currentFocus.focus();
}

And uncomment $keyboard.caret(base.$preview, base.last, true); in keyboard.js

maybe is not elegant but is working!

[Mottie]

Where is the $keyboard.caret(base.$preview, base.last, true); code you're referring to?

[pablodgonzalez]

Sorry, this line https://github.com/Mottie/Keyboard/blob/1db48e9519d932f6e869f0eaaab29868fa47ff6a/js/jquery.keyboard.js#L1739