javascript - Bootstrap Modal 输入失去对点击的关注

Question

我正在处理两个位于同一页面上的 Bootstrap 模式。 Bootstrap 2.3.2

我遇到的问题是，无论何时出现模态，当您第一次点击模态中的任何输入时，它都会立即失去焦点。之后focus就正常了，这是第一次。

我发现了一些类似的问题，但到目前为止，他们的解决方案都对我不起作用。这是我尝试过的:

1.)

$('#Modal').focus(function (e) {
        e.preventDefault();
});

2.) 关于删除模态上的“in”类，我的没有

3.) 试图注释掉 Bootstrap 代码的一部分，这无论如何都不是理想的解决方案，找不到确切的代码片段但类似的东西，但那没有用。

4.) 既将焦点设置在输入上(在单击某些内容之前一直有效)，又防止再次默认。

$('#Modal').on('shown', function (e) {
        e.preventDefault();
        $('#textArea').focus();
});

在这一点上，我已经用尽了谷歌，我什至想不出一种方法来调试为什么会发生这种情况。非常感谢答案或建议的尝试路线。

Answer 1

我确实遇到了这个问题，我想我已经弄明白了。

出了什么问题

我猜你的模式是用“淡入淡出”类设置的，所以它会过渡进出，但第一个过渡并没有产生很好的“滑动”效果。至少，这就是发生在我身上的事情。

这一切都归结为 bootstrap.js 的 Modal 类中的这段代码(在 show 函数中):

var transition = $.support.transition && that.$element.hasClass('fade')
...
transition ?
  that.$element.one($.support.transition.end, function () {
    that.$element.focus().trigger('shown') 
  }) :
  that.$element.focus().trigger('shown')

这意味着如果您想要在模态上进行转换，它将等待“转换结束”事件，然后强制关注模态并触发其“显示”事件。

由于第一个介绍过渡实际上并没有过渡，它从未触发过渡结束事件，因此回调只是等待下一个，最终来自文本框上的蓝色发光效果，因为它获得专注。

文本框的发光过渡，触发过渡结束事件，该事件被 Bootstrap 过渡结束处理程序捕获，此时强制关注模式的元素，并触发“显示”事件。

修复

对我来说，解决问题归结为删除模态元素上的 "in" 类，但您在第 2 点中提到您没有那个类。

一个可能对您有用的更通用的修复方法是阻止过渡结束事件冒泡到模式的监听器将听到它的程度。类似这样的事情:

$textField.on($.support.transition.end, function(e){
  e.stopPropagation()
})

这样，模式将有望获得一些其他的过渡结束事件(例如，当它过渡出来时，您可能会看到它在那个时候触发了“显示”事件)，此时它会恢复与自身同步(这解释了为什么它只在您第一次打开模式时发生)。

我希望这对你也有用!我知道这个问题已经有一年多了，但也许它会解决那一岁的好奇心痒;)