焦點（）完全不起作用

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(); 
});