Add key to enable/disable all input

[Mottie]

Add a new key to emulate this demo

$('#keyboard').keyboard({
    visible: function (e, kb, el) {
        if (!kb.$keyboard.find('.ui-keyboard-lock').length) {
            // add lock button
            kb.$keyboard.append('<button class="ui-keyboard-button ui-keyboard-lock ui-state-default ui-corner-all"><span class="ui-icon-unlocked ui-icon"></span></button>');
            kb.$keyboard.find('.ui-keyboard-lock').click(function () {
                var locked = !$(this).find('span').hasClass('ui-icon-locked');
                // prevent physical keyboard from working
                kb.$preview.prop('readonly', locked);
                // disable all buttons
                kb.$keyboard.find('.ui-keyboard-button')
                    .not('.ui-keyboard-lock')
                    .prop('disabled', locked)
                    .attr('aria-disabled', locked);
                $(this).find('span')
                    .toggleClass('ui-icon-locked', locked)
                    .toggleClass('ui-icon-unlocked', !locked);
                // stop auto typing
                if (locked && kb.typing_options) {
                    kb.typing_options.text = '';
                }
            });
        }
    }
})
// activate the typing extension
.addTyping();

$('button.open').click(function () {
    var keyboard = $('#keyboard').getkeyboard();
    keyboard
        .reveal()
        .typeIn('Type on the keyboard', 500, function (kb) {
            // do something after text is added (kb = keyboard)
            // kb.accept(); // close keyboard and accept changes
        });
});

Note: The lock button should use an image instead of jQuery UI's "ui-icon-unlocked" and "ui-icon-locked" class names, as in the demo. This will allow developers to remain independent of the jQuery UI if so desired.