带引导模式的软键盘焦点

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 question related to just focus

another question

编辑： 稍微看了一下引导代码后，看起来它在所有处理之后都将焦点集中在模态控件上。我假设发生了这样的事情，这就是我添加 setTimeout 的原因，但即使有很大的延迟，也没有运气。这个周末我会更仔细地看一下 bootsrap 代码

---

赏金编辑： 引导代码：

  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() 一个元素，如果它在单击事件处理程序内同步执行（有关更多信息，请参阅this SO question）。

如果您真的希望键盘自动显示，那么如果您绑定到 click/touchend 事件而不是 bs.modal.show

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