焦点（）完全不起作用

Question

我尝试以focus()作为Bootstrap模式中的输入，但似乎没有任何效果。我已经尝试了setTimeout和tabindex修复程序，但没有任何结果。

即使当我在控制台中运行它：

$("#inpProperty").focus(); 

$("#inpProperty")[0].focus(); 

不集中。我在Fedora上使用Firefox 53.0,64位。

这是模态：

<div id="mdlAddProperty" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Create New Property</h4> 
     </div> 
     <div class="modal-body"> 

     <div class="alert alert-danger collapse" id="divAlert"> 
      <a href="#" class="collapse" data-dismiss="alert">&times;</a> 
      <span id="spnMessage"></span> 
     </div> 

     <p>Property Name:</p> 
     <p><input class="input" id="inpProperty" tabindex="1"></p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button> 
     <button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

更新它工作在Chrome一次，零次在Firefox。

Answer 1

这里是引导模态事件，你可以使用：

在这里阅读更多：https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

此外，如果您在控制台中运行JS，你需要使用（开放模式在前）：

jQuery("#inpProperty").focus();

$(document).ready(function() { 
 
    $("#myBtn").click(function() { 
 
    $("#mdlAddProperty").modal("show"); 
 
    }); 
 
    $("#mdlAddProperty").on('shown.bs.modal', function() { 
 
    $("#inpProperty").focus(); 
 
    }); 
 
});

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

 

 
<div class="container"> 
 
    <h2>Modal Events - shown.bs.modal</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div id="mdlAddProperty" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Create New Property</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 

 
      <div class="alert alert-danger collapse" id="divAlert"> 
 
      <a href="#" class="collapse" data-dismiss="alert">&times;</a> 
 
      <span id="spnMessage"></span> 
 
      </div> 
 

 
      <p>Property Name:</p> 
 
      <p> 
 
      <input class="input" id="inpProperty" tabindex="1"> 
 
      </p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button> 
 
      <button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

如果您需要关注它在刚刚beginnig你可以要集中在HTML元素上添加autofocus事件。

<div id="mdlAddProperty" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Create New Property</h4> 
     </div> 
     <div class="modal-body"> 

     <div class="alert alert-danger collapse" id="divAlert"> 
      <a href="#" class="collapse" data-dismiss="alert">&times;</a> 
      <span id="spnMessage"></span> 
     </div> 

     <p>Property Name:</p> 
     <p><input class="input" id="inpProperty" tabindex="1" autofocus></p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button> 
     <button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

但是，如果你想用jQuery你这样做需要$(document).ready(function());

$(document).ready(function() { 
    $("#inpProperty").focus(); 
    $("#inpProperty")[0].focus(); 
});