focus WITH SOFT-KEYBOARD with bootstrap modal

Question

How can I make the softkeyboard come up with the bootstrap modal when auto focusing a field? It sounds easy, but I am unable to do so as of yet.

The focus part works but not the keyboard.

I am trying to save the user a tap.

I can leverage 'shown.bs.modal' and set the focus but the softkeyboard will not show up automatically. The user still needs to retap the field. How can I force the softkeyboard to come up.

The code I am currently playing with (pretty much):

        this.$container.on('shown.bs.modal', function () {
            console.log('shown.bs.modal');
            setTimeout(function () {
                var $ctrl = $(jqselector);
                $ctrl.addClass('active').focus();
            }, 500);
        });
        this.$container.modal({
            backdrop: (this.config.showModal ? 'static' : true)
        })
        .on('hidden.bs.modal', function () {
            $(this).remove();
        });

SE question related to just focus

another question

Edit: After looking at the bootstrap code a bit, it looks like it ads focus to the modal control after all of the processing. I assumed something like this was happening which is why I added the setTimeout, but even with a large delay, no luck. I will look at the bootsrap code a little more closely this weekend

---

Bounty edit: Bootstrap code:

  Modal.prototype.show = function (_relatedTarget) {
    var that = this
    var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

    this.$element.trigger(e)

    if (this.isShown || e.isDefaultPrevented()) return

    this.isShown = true

    this.checkScrollbar()
    this.$body.addClass('modal-open')

    this.setScrollbar()
    this.escape()

    this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))

    this.backdrop(function () {
      var transition = $.support.transition && that.$element.hasClass('fade')

      if (!that.$element.parent().length) {
        that.$element.appendTo(that.$body) // don't move modals dom position
      }

      that.$element
        .show()
        .scrollTop(0)

      if (transition) {
        that.$element[0].offsetWidth // force reflow
      }

      that.$element
        .addClass('in')
        .attr('aria-hidden', false)

      that.enforceFocus()

      var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

      transition ?
        that.$element.find('.modal-dialog') // wait for modal to slide in
          .one('bsTransitionEnd', function () {
            that.$element.trigger('focus').trigger(e)
          })
          .emulateTransitionEnd(300) :
        that.$element.trigger('focus').trigger(e)
    })
  }

  Modal.prototype.enforceFocus = function () {
    $(document)
      .off('focusin.bs.modal') // guard against infinite focus loop
      .on('focusin.bs.modal', $.proxy(function (e) {
        if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
          this.$element.trigger('focus')
        }
      }, this))
  }

I have been playing with code in a timout on the show and shown custom modal events. The code pretty much looks like the following.

            setTimeout(function (e) {
                $(':focus').trigger('blur'); 
                $(document).off('focusin.bs.modal');
                var $ctrl = $(jqSelect);
                $ctrl.trigger('focus');
                $ctrl.trigger('click');
            }, 750);

Answer 1

I think that this doesn't have to do with Bootstrap, but with the limitations of auto-focusing form fields on mobile devices. For example, Mobile Safari will only let you programmatically focus() an element if it is executed synchronously inside a click event handler (see this SO question for more information).

If you really want the keyboard to automatically show up, perhaps what will work is if you bind to the click/touchend event instead of bs.modal.show

var self = this;
$('.some-btn-that-triggers-the-modal').on('click', function() {
  $(jqSelector).addClass('active').focus();
});