twitter-bootstrap 引导模式打开时，无法在 input type="text" 中输入（甚至聚焦）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38568621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot type (or even focus) in input type="text" while bootstrap modal is open
提问by clod986
I have a jquery code that creates a dropdown menu and places it exactly where the user right-clicked. Everything works fine except one thing: I cannot type inside an input field.
我有一个 jquery 代码，它创建一个下拉菜单并将其放置在用户右键单击的位置。一切正常，除了一件事：我无法在输入字段中输入。
The generated dropdown looks as follows:
生成的下拉列表如下所示：
<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>
In my idea, the input will be used to filter the Sublinks.
在我的想法中，输入将用于过滤子链接。
What I've tried (with no results):
我尝试过的（没有结果）：
- Change z-index
- Force $('input').focus()
- Force $('input').get(0).focus()
- Playing around with CSS to check if it was just white text over white background
- Reviewed code to see if some other jQuery was interfering
- 更改 z-index
- 强制 $('input').focus()
- 强制 $('input').get(0).focus()
- 使用 CSS 来检查它是否只是白色背景上的白色文本
- 查看代码以查看是否有其他 jQuery 干扰
Hope you guys can help.
希望大家能帮忙。
EDIT (working example): It appears that this is a Bootstrap problem: as you can see from this fiddle http://jsfiddle.net/2gkjb0h8/3/the input can be entered UNTIL the bootstrap modal is opened. Still no clue on how to solve this.
编辑（工作示例）：这似乎是一个引导程序问题：正如您从这个小提琴http://jsfiddle.net/2gkjb0h8/3/ 中看到的，可以输入输入，直到引导程序模式打开。仍然不知道如何解决这个问题。
EDIT 2: Here's an image of what I want to achieve http://prnt.sc/bxbucfIn the modal, there will be a table with selectable TDs; once selected, the user can right click to open a context menu with a list of teachers (each of them is a link). This works already, the input is there to allow filtering all the possible names.
编辑 2：这是我想要实现的图像http://prnt.sc/bxbucf在模态中，将有一个带有可选 TD 的表格；选择后，用户可以右键单击以打开带有教师列表的上下文菜单（每个教师都是一个链接）。这已经起作用了，输入在那里允许过滤所有可能的名称。
回答by Ben Harrison
It appears that this answer would resolve your problem.
看来这个答案可以解决您的问题。
Twitter Bootstrap modal blocks text input field
The author recommends against a modal for this scenario (and I agree).
作者建议不要在这种情况下使用模态（我同意）。
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.
听起来模态不是解决您问题的正确方法。
根据定义，模态对话框不应允许用户与其下方的任何内容进行交互。
However, he does provide a workaround:
但是，他确实提供了一种解决方法：
Bootstrap 2
引导程序 2
$('#myModal1').on('shown', function() {
$(document).off('focusin.modal');
});
You can see this in action on an updated jsfiddle of your original solution:
您可以在原始解决方案的更新 jsfiddle 上看到这一点：
http://jsfiddle.net/2gkjb0h8/4/
http://jsfiddle.net/2gkjb0h8/4/
Bootstrap 3
引导程序 3
It should also be noted that the event names changed in Bootstrap 3:
还应该注意的是，Bootstrap 3 中的事件名称发生了变化：
$('#myModal1').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
回答by Mukunda Bhatta
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
tabindex is used to define whether elements should be focusable or not within a page. You have used tabindex attribute so that focus is on modal and you can't able to enter text on text box. Just remove tabindex you can able to enter text.
tabindex 用于定义元素是否应该在页面内可聚焦。您使用了 tabindex 属性，因此焦点位于模态上，并且您无法在文本框中输入文本。只需删除 tabindex 您就可以输入文本。
<div id="myModal1" class="modal hide" role="dialog">
回答by brk
Not sure if the element is in DOMwhen you are trying to focus on it.
DOM当您尝试专注于该元素时，不确定该元素是否在其中。
You can call this once this component is visible after right click. Also use assign an idto this input element.
一旦该组件在右键单击后可见，您就可以调用它。也使用分配id给这个输入元素。
$('body').find('#idOfInput').focus();
回答by Ram Segev
You can try usind data-target to focus the input
您可以尝试使用 data-target 来聚焦输入
.btn-group {
z-index: 1051;
}
ul[role="menu"]{
position: absolute;
left: 50px;
top: 400px;
z-index: 999999;
border: 1px solid black;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<h3>Inputting proble</h3>
<!-- Button to trigger modal -->
<div>
<a href="#myModal1" role="button" class="btn" data-toggle="modal" data-target="#text" class="test" >Launch Modal</a>
<p>
Now you are able to enter text in the input field below. Once tested, open the modal.
</p>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal</h3>
</div>
<div class="modal-body">
<p>Now you will not be able to enter text in the input</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
<ul role="menu">
<li><a href="#">Link 1</a></li>
<li role="separator" class="divider"></li>
<li><input id="text" 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>
<style>回答by Binita Bharati
I had the same issue using bootstrap modal version 4.3.1. The prescribed solution to remove the focus out of the open modal was not working for me.So, I ended up removing the modal entirely from my code. And used combination of css attributes position,z-indexand displayto achieve the same look as that of a modal dialog.
我在使用 bootstrap modal version 时遇到了同样的问题4.3.1。从打开的模态中移除焦点的规定解决方案对我不起作用。所以，我最终从我的代码中完全移除了模态。并使用了 css 属性的组合position，z-index并display实现了与模态对话框相同的外观。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.rootDivKlass {
position: relative;
width: 800px;
height: 500px;
background-color: #A64831;
}
.backGroundDivKlass {
background-color: #BEB2AF;
height:400px;
width:500px;
z-index: 1;
position: absolute;
}
.myModalLikeDivKlass {
position: absolute;
z-index: 2;
display: block;
width: 290px;
height: 200px;
margin: 100px;
background-color: white;
}
.inputDivKlass {
position: absolute;
margin-left: 550px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="rootDivKlass">
<div id="modalBackgroundDiv" class="backGroundDivKlass">
</div>
<div class="myModalLikeDivKlass">
<center><font color="blue">Put your modal content here</center>
</div>
<div class="inputDivKlass">
<input type="text"/>
</div>
</div>
</body>
</html>
回答by Nguy?n M?nh Luan
Correct! Tabindex is used to define whether elements should be focusable or not within a page. You have used tabindex attribute so that focus is on modal and you can't able to enter text on text box. Just remove tabindex you can able to enter text.
正确的！Tabindex 用于定义元素是否应该在页面内可聚焦。您使用了 tabindex 属性，因此焦点位于模态上，并且您无法在文本框中输入文本。只需删除 tabindex 您就可以输入文本。
