FAQ

List of FAQ

Change Size | Hide Native Keyboard | Slow on Mobile | Use in Bootstrap Modal | Contributing

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: 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.