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

Posted 2023-05-07

【中文标题】Bootstrap 模态输入失去对点击的关注

【英文标题】：Bootstrap Modal inputs lose focus on click

【发布时间】：2014-01-26 22:35:04

【问题描述】：

我正在研究 2 个引导模式，它们都位于同一页面上。引导程序 2.3.2

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

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

1.)

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

2.) 关于删除模式上的“in”类的一些事情，我的没有

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

4.) 将焦点设置在输入上（在单击某些内容之前有效），并再次阻止默认设置。

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

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

【问题讨论】：

请关注这个***.com/questions/11634809/…

我见过这个问题，它询问如何在显示模式时获得焦点，而不是为什么输入失去对点击的焦点。

setTimeout (function () $("#textArea").focus(); , 1); ***.com/questions/11210552/…

刚刚尝试了您在 .on('shown') 函数中的建议，但并没有解决问题。最初显示模态时它仍然正确聚焦，但是一旦我单击它或模态上的另一个输入，它就会失去焦点。

你问这个很有趣，我只是注意到我遇到了同样的问题。我使用的是 BS 2.3.2，但是你找到解决方法了吗？谢谢！

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

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

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

文本框的发光过渡，触发一个过渡结束事件，该事件被引导过渡结束处理程序捕获，此时强制焦点在模态元素上，并触发“显示”事件。

补救

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

一个可能对您有用的更通用的修复方法是阻止过渡结束事件冒泡到模态的侦听器将听到它的点。类似这样的东西：

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

这样，模态将有望获得其他一些过渡结束事件（例如，当它过渡出来时，您可能会看到它在该点触发“显示”事件），此时它会重新与自身同步（解释了为什么它只在您第一次打开模式时发生）。

我希望这也适用于你！我知道这个问题已经有一年多了，但也许它会刮掉那一年的好奇心；）

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