带引导模式的软键盘焦点

Posted 2023-03-31

【中文标题】带引导模式的软键盘焦点

【英文标题】：focus WITH SOFT-KEYBOARD with bootstrap modal

【发布时间】：2014-08-21 21:14:02

【问题描述】：

如何让软键盘在自动聚焦字段时出现引导模式？ 这听起来很容易，但我目前还做不到。

焦点部分有效，但键盘无效。

我正在尝试为用户节省点击次数。

我可以利用“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);

【问题讨论】：

试试$(':focus').trigger('blur'); $ctrl.addClass('active').click().focus();。如果它有效，我会解释，但我不确定它是否会在自定义事件中有效。

我今天/这个周末有一些优先级更高的事情要处理，但希望有一点赏金可以让某人帮助解决我的问题。我可能会在下周一尝试任何建议

您遇到的问题可能与 Bootstrap 模态完全无关。您是否有工作 javascript 显示没有模式的软键盘（即，页面上的输入一旦页面加载就会接收焦点）？

@AndyW 是的...例如..如果您在执行上述js的模态html中的按钮上放置单击事件，则弹出软键盘没有问题

@jumpdart：但这需要用户交互（点击），是吗？看到这个答案：***.com/a/15133808/1303740

【参考方案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();
);

【讨论】：

顺便说一句，我们在构建移动网络应用程序时尝试了这种自动对焦，发现大多数用户更喜欢执行额外的点击。专注于表单字段在 ios 上会做各种疯狂的事情，比如放大浏览器、移动视口等，它会影响用户。只是一个想法:)