javascript – 当bootstrap模式打开时,无法在input type =“text”中键入(或甚至焦点)

代码,可以创建一个下拉菜单,并将其放在用户右键单击的位置.一切正常,除了一件事：我无法输入输入字段.

生成的下拉列表如下所示：

<ul role="menu" style="display: none; position: absolute; left: 751px; top: 294px; z-index: 999999;">
    <li><a href="#">Link 1</a></li>
    <li role="separator" class="divider"></li>
    <li><input type="text" name="filter"></li>
    <li style="height:200px;" class="scroll-container-y">
        <ul class="list-unstyled gutter-left-small">
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
        </ul>
    </li>
</ul>

在我的想法中,输入将用于过滤子链接.

我尝试了什么(没有结果)：

>更改z-index

>强制$(‘输入’).焦点()

>强制$(‘输入’).get(0).focus()

>使用CSS来检查它是否只是白色背景上的白色文本

>查看代码以查看是否有其他jQuery干扰

希望你们能帮忙.

编辑(工作示例)：

看起来这是一个Bootstrap问题：正如你可以从这个小提琴 http://jsfiddle.net/2gkjb0h8/3/ 看到的那样输入可以输入到自举模式打开.仍然不知道如何解决这个问题.

编辑2：

这是我想要达到的目标 http://prnt.sc/bxbucf

在模态中,将有一个可选择TD的表格;一旦选中,用户可以右键单击打开带有教师列表的上下文菜单(每个教师都是一个链接).这已经有效,输入是允许过滤所有可能的名称.

看来这个答案可以解决您的问题.

Twitter Bootstrap modal blocks text input field

作者建议不要使用这种情况的模态(我同意).

It sounds like a modal isn’t the right solution to your problem here.
A modal dialog by definition shouldn’t allow the user to interact with anything below it.

但是,他确实提供了一个解决方法：

Bootstrap 2

$('#myModal1').on('shown', function() {
    $(document).off('focusin.modal');
});

您可以在原始解决方案的更新jsfiddle中看到此操作：

http://jsfiddle.net/2gkjb0h8/4/

Bootstrap 3

还应注意,Bootstrap 3中的事件名称已更改：

$('#myModal1').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});