Question

如何在自动对焦场时让软键盘出现自举模式？ 这听起来很容易，但我还是无法做到。

焦点部分可以工作，但键盘不起作用。

我正在尝试为用户保存一个水龙头。

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

我正在玩的代码（非常）：

        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

编辑：稍微查看一下bootstrap代码之后，看起来广告在所有处理之后都会关注模态控件。我假设这样的事情正在发生，这就是为什么我添加了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();
});

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

1 个答案: