引導模式打開時無法在輸入類型=「文本」中輸入（甚至無法聚焦）

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-index
• 部隊$（ '輸入'）專注（）
• 部隊$（ '輸入'）。得到（0）.focus（）
• 與CSS玩弄檢查，如果這只是白色的文字在白色背景
• 發表的代碼，看看一些其他的jQuery是干擾

希望你們能幫忙。

編輯（工作示例）： 看起來這是一個Bootstrap問題：從該提琴http://jsfiddle.net/2gkjb0h8/3/中可以看到輸入可以輸入，直到引導模式打開。仍然沒有線索如何解決這個問題。

編輯2： 這是我想要實現的圖像http://prnt.sc/bxbucf 在模式中，將會有一個帶有可選擇的TD的表格;一旦選擇，用戶可以右鍵單擊以打開一個帶有教師列表的上下文菜單（每個教師都是一個鏈接）。這已經可以工作了，那裏的輸入是允許過濾所有可能的名字。

Answer 1

當您嘗試關注它時，不確定元素是否在DOM中。

一旦這個組件在右鍵點擊後可見，你可以調用它。也可以使用將id分配給此輸入元素。

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

Answer 2

看來這個答案可以解決你的問題。

Twitter Bootstrap modal blocks text input field

筆者建議對這個場景模態（我同意）。

這聽起來像一個模式不適合你的問題在這裏。

根據定義，模式對話框不應允許用戶與其下的任何內容進行交互。

不過，他確實提供了一個解決辦法：

引導2

你可以看到在行動這對原來的解決方案的更新的jsfiddle：

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

引導3

還應當指出的是，事件名稱在引導3改爲：

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

Answer 3

您可以嘗試usind數據目標集中輸入

.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>

Answer 4

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

tabindex用於定義元素是否應該在頁面中可以聚焦或不聚焦。您已使用tabindex屬性，以便焦點位於模態，並且無法在文本框中輸入文本。只需刪除tabindex即可輸入文字。

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

Click here to check on jsfiddle