FAQ

List of FAQ

• Is there an easy way to change the size of the keyboard?
• How do I stop the native keyboard from opening?
• How do I position the Keyboard?
• Why doesn't caret positioning work?
• Why isn't the keyboard very responsive on my mobile page?
• How do I use the keyboard in a Bootstrap Modal?
• How can I contribute a keyboard layout?

Q: Is there an easy way to change the size of the keyboard?

A: Yes! Change the css. In the keyboard.css file look for these lines:

.ui-keyboard span { font-size: 1.1em; }
.ui-keyboard-button { height: 2em; width: 2em; margin: .1em; cursor: pointer; }

• The default font-size of 1.1em (110% of the set font size on the page) will also adjust the overall size of the keyboard. If the font size isn't the problem, then you can adjust the button size in the second line of css to change that size.

Q: How do I stop the native keyboard from opening?

A: There isn't a perfect solution for this issue, yet.

Try:

• Set the lockInput keyboard option to true (ref). This prevents input from sources outside of the virtual keyboard. Clicking to set the caret still works, but the actual caret is not visible. Consider including the caret extension.
• Add a readonly property to the input. This is essentially what the lockInput option does but more directly. Again, the caret won't be visible, so consider including the caret extension.
• Using blur on the input doesn't work because this plugin reapplies the focus on the input after interacting with the virtual keyboard (demo).

Q: How do I position the Keyboard?

A: jQuery UI position utility or CSS.

The keyboard relies on jQuery UI position utility to position the keyboard (and autocomplete popup). I've created a minified custom build using their download builder for the main demo; but it hasn't been updated to work with the latest versions of jQuery.

Alternatively, you can use the provided basic dark or basic light theme which uses the following CSS to position the keyboard at the bottom center of the page:

.ui-keyboard {
  border-radius: 0;
  width: 100%;
  height: auto;
  left: 0;
  top: auto;
  bottom: 0;
  position: fixed;
  white-space: nowrap;
  overflow-x: auto;
  /* see issue #484 */
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

Q: Why doesn't caret positioning work?

A: Caret position can only be read and set for inputs of type text, search, URL, tel and password.

Specifically the selectionStart and selectionEnd methods attached to inputs are not available in inputs of type (reference):

• Hidden (type=hidden)
• E-mail (type=email)
• Date (type=date)
• Month (type=month)
• Week (type=week)
• Time (type=time)
• Local Date and Time (type=datetime-local)
• Number (type=number)
• Range (type=range)
• Color (type=color)
• Checkbox (type=checkbox)
• Radio button (type=radio)
• File upload (type=file)
• Submit button (type=submit)
• Image button (type=image)
• Reset button (type=reset)
• Button (type=button)

This is part of the HTML standard and will likely not change. The above list may not be up-to-date, so please refer to the reference for an accurate list.

The only solution is to change the input type to one of the supported types (e.g. type=text).

Q: Why isn't the keyboard very responsive on my mobile page?

A: Only use touch events.

• The keyBinding option is set to 'mousedown touchstart' by default. It seems that including the 'mousedown' event causes some lagging issues.
• Optimally, I would actually recommend using jQuery's Pointer Events Polyfill (PEP), then all that needs to be added to the keyBinding option is 'pointerdown'. And it is then usable by both desktop & mobile browsers.

Q: How do I use the keyboard in a Bootstrap Modal?

A: Append the keyboard to the modal window.

• Bootstrap continuously shifts focus to elements inside the modal window. Meaning, if you add a keyboard to a Bootstrap modal element, you can't focus on the preview input (see issue #599).

• To fix this problem, append the keyboard to the modal inside of the beforeVisible callback (demo):

  $(function() {
  
    $('.keyboard').keyboard({
      layout: "qwerty", // string or array
      beforeVisible: function(e, keyboard, el) {
        var inModal = $(el).parents('.modal').length > 0;
        if (inModal) {
          keyboard.$keyboard.appendTo($(el).parents('.modal-body'));
        }
      }
    });
  
  });

Q: How can I contribute a keyboard layout?

A: I'm glad you asked! Details can be found on the Contributing page.