当bootstrap模态打开时,无法在input type ="text"中键入(或甚至焦点)

Question

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

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

<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指数
• 强制$('输入').焦点()
• 强制$('输入').get(0).focus()
• 玩CSS用来检查它是否只是白色背景上的白色文字
• 检查代码以查看其他jQuery是否在干扰

希望你们能帮忙.

编辑(工作示例):看来,这是一个引导的问题:因为你可以从这个小提琴看到http://jsfiddle.net/2gkjb0h8/3/可直到引导模式被打开输入输入.仍然不知道如何解决这个问题.

编辑2:这是我想要实现的图像http://prnt.sc/bxbucf 在模态中,将有一个可选择TD的表格; 一旦选中,用户可以右键单击打开带有教师列表的上下文菜单(每个教师都是一个链接).这已经有效,输入是允许过滤所有可能的名称.

Answer 1

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

Twitter Bootstrap模式阻止文本输入字段

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

听起来像模态不是解决问题的正确方法.

根据定义,模态对话框不应允许用户与其下面的任何内容进行交互.

但是,他确实提供了一种解决方法:

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');
});

Answer 2

<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">

tabindex用于定义元素在页面中是否应该是可聚焦的.您已使用tabindex属性,因此焦点位于模态,您无法在文本框中输入文本.只需删除tabindex即可输入文字.

<div id="myModal1" class="modal hide" role="dialog">

点击这里查看jsfiddle

Answer 3

DOM当您尝试关注该元素时，不确定该元素是否在其中。

一旦右键单击该组件可见，您就可以调用它。还可以使用分配 anid到此输入元素。

$('body').find('#idOfInput').focus();