使用SOFT-KEYBOARD与自举模式对焦

Question

当自动聚焦场时,如何使软键盘提供自举模式？ 这听起来很容易,但我还是无法做到.

焦点部分可以工作,但不是键盘.

我试图保存用户点击.

我可以利用'shown.bs.modal'并设置焦点,但软键盘不会自动显示.用户仍然需要重新占用该字段.如何强制软键盘出现.

我正在玩的代码(非常):

        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问题只关注焦点

另一个问题

编辑:稍微查看一下bootstrap代码后,看起来广告在所有处理后都会关注模态控件.我假设这样的事情正在发生,这就是为什么我添加了setTimeout,但即使有很大的延迟,也没有运气.我将在本周末更仔细地研究一下bootsrap代码

---

赏金编辑:Bootstrap代码:

  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))
  }

我一直在节目中播放代码并显示自定义模态事件.代码几乎如下所示.

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

Answer 1

我认为这与 Bootstrap 无关，而是与移动设备上自动聚焦表单字段的限制有关。例如，Mobile Safari 仅允许您以编程方式获取focus()元素（如果该元素在单击事件处理程序内同步执行）（请参阅此 SO 问题以获取更多信息）。

如果您确实希望键盘自动显示，也许您绑定到 click/touchend 事件而不是bs.modal.show

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