Question

我正在研究两个位于同一页面上的引导模态。 Bootstrap 2.3.2

我遇到的问题是，每当模态出现时，第一次点击模态中的任何输入时，它都会立即失去焦点。之后，焦点功能很好，这是第一次。

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

1）

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

2。）关于删除模态中的“in”类的东西，我的没有

3。）尝试注释掉一部分引导代码，这不是一个理想的解决方案，无法找到确切的代码片段但类似的东西，但是没有用。

4。）两个设置都集中在一个输入上（直到点击某个东西为止），并再次防止默认。

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

此时我已经非常厌倦谷歌了，我想不出一种方法来调试为什么会发生这种情况。无论是回答还是建议尝试的路线都将非常感激。

Answer 1

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

出了什么问题

我猜测你的模态是用＆＃34; fade＆＃34;设置的。这样一来，它就会过渡进出，但是第一次过渡并没有做好的＆＃34;幻灯片＆＃34;影响。这至少是我发生的事情。

这一切都归结为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')

这意味着如果你想要模态转换，它将等待转换结束＆＃34;在强制关注模态并触发其显示之前的事件＆＃34;事件

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

文本框的辉光过渡，触发了一个转换结束事件，该事件被引导转换结束处理程序捕获，在此时强制关注模态的元素，并触发了＆＃ 34;示出＆＃34;事件

<强>修复

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

一个可能适用于您的更通用的修复方法是阻止转换结束事件冒泡到模态侦听器将听到它的位置。有点像这样：

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

这样，模态将有希望得到一些其他转换结束事件（例如，当它转换出来时，你可能会看到它触发＆＃34;显示＆＃34;那时的事件），此时它会重新进入与自身同步（这解释了为什么它只在您第一次打开模态时发生过。）

我希望这也适合你！我知道这个问题已经超过一年了，但也许它会刮掉这一年的好奇心痒;）

Answer 2

遇到同样的问题，它似乎与Bootstraps“焦点蓝色突出显示”功能有关。我个人并不关心失去它，但无可否认无法找到一种方法来“禁用”使用“！important”的样式，不应用任何样式等等。所以最后，它是一种解决方法，但它确实解决了这个问题。特别的问题......

为了解决这个问题，我在bootstrap.css文件中注释掉了CSS，该文件应用于输入元素的焦点伪类：

/*
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
} */

Bootstrap模态输入失去了对点击的关注

2 个答案: