引导模式打开时无法在输入类型=“文本”中键入（甚至无法聚焦）

问题描述 投票：0回答：7

我有一个 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 索引
  • 强制 $('input').focus()
  • 强制 $('input').get(0).focus()
  • 使用 CSS 检查它是否只是白色背景上的白色文本
  • 检查代码以查看是否有其他 jQuery 干扰

希望大家能帮忙。

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

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

javascript jquery html css twitter-bootstrap
7个回答
32
投票

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

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

作者建议不要在这种情况下使用模式（我同意）。

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

根据定义，模式对话框不应允许用户与其下方的任何内容进行交互。

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

引导程序2

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

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

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

引导程序3

还应该注意的是，Bootstrap 3 中的事件名称发生了变化：

$('#myModal1').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});
22
投票
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">

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

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

点击这里查看jsfiddle

1
投票

当您尝试聚焦该元素时，不确定该元素是否位于 

DOM
中。

右键单击该组件后可见，您可以调用此函数。还可以使用为此输入元素分配 

id
。

$('body').find('#idOfInput').focus();
1
投票

您可以尝试使用 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>

0
投票

我使用引导模式版本也遇到了同样的问题

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>
0
投票

使用 Boostrap 5，可以通过使用模态元素上的 

data-bs-focus="false"
属性来禁用模态焦点陷阱。

-3
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.