Keyboard doesn't show for widgets in Bootstrap modal dialogs

[softelos]

The dialog box is enabled from the same javascript that binds the keyboard to all inputs. The keyboard works perfectly for all inputs in the visible HTML but not for the invisible one that gets enabled when needed (pop up dialog box).

[Mottie]

Hi @softelos!

Please modify this demo to help me understand the problem.

[softelos]

Thanks for the response @Mottie !

I've updated the fiddle . As you can see when you press the button, the keyboard doesn't work for the input elements in the modal dialog.

[Mottie]

Because the dialog is being created using message: $('div#wrap').html(), you'll need to use a delegated bind on the document so the script knows when the modal is open and that the keyboard plugin needs to be initialized (demo):

$(document).on('shown.bs.modal', '.modal', function() {
  $('.modal input').keyboard({
      layout: 'qwerty',
      css: {
        // input & preview
        input: 'form-control input-sm',
        // keyboard container
        container: 'center-block dropdown-menu', // jumbotron
        // default state
        buttonDefault: 'btn btn-default',
        // hovered button
        buttonHover: 'btn-primary',
        // Action keys (e.g. Accept, Cancel, Tab, etc);
        // this replaces "actionClass" option
        buttonAction: 'active',
        // used when disabling the decimal button {dec}
        // when a decimal exists in the input area
        buttonDisabled: 'disabled'
      },
      usePreview: false
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 50
    });
}).on('hide.bs.modal', '.modal', function() {
  // remove keyboards to free up memory
  $('.modal input').each(function() {
    $(this).data('keyboard').destroy();
  });
});

$('button#dialogButton').on('click', function() {
  bootbox.dialog({
    title: 'User Registration',
    message: $('div#wrap').html(),
    buttons: {
      save: {
        label: 'Save',
        class: 'btn-success'
      },
      cancel: {
        label: 'Cance',
        class: 'btn-default'
      }
    }
  });
});

And you'll need this css to override bootstrap's definition:

div.ui-keyboard {
  z-index: 2000;
}

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.