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
强制$（'输入'）。focus（）
强制$（'输入'）。get（0）.focus（）
使用CSS来检查它是否只是白色背景上的白色文字
审核了代码以查看其他jQuery是否在干扰

希望你们能帮忙。

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

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

Answer 1

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

Twitter Bootstrap modal blocks text input field

作者建议不要使用这种情况的模态（我同意）。

这听起来像模式不是解决问题的正确方法。

按照定义，模态对话框不应允许用户与其下面的任何内容进行交互。

但是，他确实提供了一种解决方法：

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

cur.execute("INSERT into `users` (username, password) VALUES (?,?)", (str(cid), str(hashedpw)) )

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

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

Click here to check on jsfiddle

Answer 3

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

右键单击后，此组件可见后，您可以调用此方法。还可以使用id为此输入元素指定。

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

Answer 4

您可以尝试使用dataind target来聚焦输入

＆＃13;

.btn-group {
    z-index: 1051;
}

ul[role="menu"]{
  position: absolute; 
  left: 50px; 
  top: 400px;
  z-index: 999999;
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

Answer 5

使用引导模式版本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>

Answer 6

正确！ Tabindex用于定义元素在页面内是否应该是可聚焦的。您已使用tabindex属性，以便焦点位于模式上，并且您无法在文本框中输入文本。只需删除tabindex即可输入文本。

当bootstrap模式打开时，无法在input type =“text”中键入（或甚至焦点）

6 个答案: