2016-03-02 28 views
5

trong khi tạo web Tôi không tập trung vào "đầu vào" vào Bootstrap Modal, tôi đã thử mọi thứ và không hoạt động, phương thức xuất hiện nhưng đầu vào không lấy nét. Tôi đã thực hiện một "test.php" với một phương thức đơn giản và không hoạt động. Đây là "test.php"Bootstrap Modal Focus không hoạt động

<html lang="es"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 


    <link href="../css/bootstrap.min.css" rel="stylesheet"> 
    <script src="../js/jquery.min.js"></script> 
    <script src="../js/bootstrap.min.js"> 



    <script> 


$('#myModal').on('shown.bs.modal', function() { 
    $('#referencia').focus(); 
}) 


    </script> 

</head> 
<body> 
<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <input name="referencia" id="referencia" type="text" class="form-control text-uppercase" placeholder="Descripci&oacute;n"> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 
</body> 

Nếu tôi thử mã này trên máy chủ của tôi nó không hoạt động, trên unelink.es máy chủ không hoạt động một trong hai, nhưng nếu tôi đặt cùng mã trên "fiddle ", hoạt động tốt.

Bất kỳ ý tưởng nào về điều gì sai? Nếu tôi cần cái gì khác ... hoặc cài đặt một cái gì đó trong máy chủ.

P.D. Xin lỗi vì tiếng Anh của tôi.

+0

Có lẽ trình duyệt của bạn không tìm thấy jquery .min.js ?! Nếu bạn mở trình duyệt bằng công cụ F12/nhà phát triển/firebug, bạn có thấy các mục nhập màu đỏ trong chế độ xem mạng không? – Varon

+0

Nó chỉ là những gì tôi đã làm, đây là những gì nó nói: Lỗi: JavaScript của Bootstrap yêu cầu jQuery .. nhưng lưu trữ là có. Tại sao không tải? – teikuei

+0

Nếu tôi thử Chrome nó hoạt động ... phải là một thứ gì đó của firefox. Đã phát điên. Điều gì có thể là vấn đề với Firefox? đã làm việc tốt cho đến bây giờ. – teikuei

Trả lời

18

Hãy thử điều này (tự động lấy nét thêm vào liên kết của bạn):

<input name="referencia" id="referencia" type="text" class="form-control text-uppercase" placeholder="Descripci&oacute;n" autofocus> 

hoặc thử này:

$('#myModal').on('shown.bs.modal', function() { 
    $('#myInput').focus(); 
}) 

hay này:

// Every time a modal is shown, if it has an autofocus element, focus on it. 
$('.modal').on('shown.bs.modal', function() { 
    $(this).find('[autofocus]').focus(); 
}); 
+0

Đối với tôi đã làm việc tùy chọn thứ 2. Cảm ơn bạn – cralfaro

+0

Cảm ơn bạn, điều này làm cho ngày của tôi. :) Làm việc như một nét duyên dáng –

+0

Đặc biệt là chức năng jquery để luôn tự động lấy nét. Tạo UX hằng số nếu người dùng vô tình đóng phương thức. – Michael

Các vấn đề liên quan