单击模态的滚动条时，防止引导模态内的输入失去焦点答案

【问题标题】：Prevent input inside a bootstrap modal losing focus when click on modal's scrollbar单击模态的滚动条时，防止引导模态内的输入失去焦点
【发布时间】：2018-10-16 15:27:25
【问题描述】：

我在模态框内有一个输入。如果输入具有焦点并且我单击模态的滚动条，则输入失去焦点。我怎样才能防止这种情况发生？

浏览器的默认行为是在您单击滚动条时不移除输入焦点，但是在引导模式中这不会发生。

例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>



<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
    Launch Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form role="form">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control"
                      id="exampleInputEmail1" placeholder="Enter email"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control"
                          id="exampleInputPassword1" placeholder="Password"/>
                  </div>
                  
                </form>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
            </div>
            
        </div>
    </div>
</div>

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

这是由具有 tabindex="-1" 属性的模态容器引起的浏览器行为。

我想一个丑陋的解决方法是监听 blur 事件。如果模态框仍然打开并且模态框内没有焦点，则返回焦点

【讨论】：

【解决方案2】：

不是完美的答案

var inputs = document.getElementById('myModalNorm').getElementsByTagName('input');

var focused;

for(let i=0; i<inputs.length; i++){
inputs[i].addEventListener('focus', function(){
  focused = document.activeElement;
});
}

document.getElementById('myModalNorm').addEventListener('scroll', function(){
  if(focused){
    focused.focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>



<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
    Launch Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form role="form">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control"
                      id="exampleInputEmail1" placeholder="Enter email"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control"
                          id="exampleInputPassword1" placeholder="Password"/>
                  </div>
                  
                </form>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
            </div>
            
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

这就是我处理错误 tabindex 属性的方式：

let create_modal = $('#create-modal');
create_draft_asset_modal.on('show.bs.modal', function (e) {
    create_modal.removeAttr('tabindex');
}).on('hidden.bs.modal', function (e) {
    create_modal.attr('tabindex', '-1');
});

【讨论】：