Cách đặt tiêu điểm cho một trường cụ thể trong phương thức Bootstrap, khi nó xuất hiện

Tôi đã thấy một vài câu hỏi liên quan đến các chế độ bootstrap, nhưng không có câu hỏi nào chính xác như thế này, vì vậy tôi sẽ tiếp tục.

Tôi có một phương thức mà tôi gọi là onclick như vậy ...

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

Điều này hoạt động tốt, nhưng khi tôi hiển thị phương thức tôi muốn tập trung vào phần tử đầu vào đầu tiên ... Trong trường hợp có thể phần tử đầu vào đầu tiên có id là #photo_name.

Vì vậy, tôi đã cố gắng

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

Nhưng điều này là vô ích. Cuối cùng, tôi đã cố gắng ràng buộc với sự kiện 'chương trình' nhưng ngay cả như vậy, đầu vào sẽ không tập trung. Cuối cùng chỉ để thử nghiệm, vì tôi đã nghi ngờ đây là về thứ tự tải js, tôi đặt vào setTimeout chỉ để xem nếu tôi trì hoãn một giây, liệu tiêu điểm có hoạt động không, và vâng, nó hoạt động! Nhưng phương pháp này rõ ràng là tào lao. Có cách nào để có hiệu ứng tương tự như dưới đây mà không cần sử dụng setTimeout không?

  $("#modal-content").on('show', function(event){
    window.setTimeout(function(){
      $(event.currentTarget).find('input#photo_name').first().focus()
    }, 0500);
  });

Thử cái này

Đây là DEMO cũ :

EDIT: (Đây là một DEMO đang hoạt động với Bootstrap 3 và jQuery 1.8.3)

$(document).ready(function() {
    $('#modal-content').modal('show');
    $('#modal-content').on('shown', function() {
        $("#txtname").focus();
    })
});

Bắt đầu bootstrap 3 cần sử dụng sự kiện shows.bs.modal:

$('#modal-content').on('shown.bs.modal', function() {
    $("#txtname").focus();
})

Chỉ muốn nói rằng Bootstrap 3 xử lý việc này hơi khác một chút. Tên sự kiện là "shows.bs.modal".

$('#themodal').on('shown.bs.modal', function () {
   $("#txtname").focus();
});

hoặc tập trung vào đầu vào có thể nhìn thấy đầu tiên như thế này:

.modal('show').on('shown.bs.modal', function ()
{
    $('input:visible:first').focus();
})

http://getbootstrap.com/javascript/#modals

Tôi đang sử dụng điều này trong bố cục của mình để nắm bắt tất cả các phương thức và tập trung vào đầu vào đầu tiên

  $('.modal').on('shown', function() {
     $(this).find('input').focus();
  });

Tôi gặp vấn đề tương tự với bootstrap 3, tập trung khi tôi nhấp vào liên kết, nhưng không phải khi kích hoạt sự kiện bằng javascript. Giải pháp:

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

Có lẽ nó là một cái gì đó về hoạt hình!

Tôi gặp vấn đề khi bắt sự kiện "shows.bs.modal" .. Và đây là giải pháp của tôi hoạt động hoàn hảo ..

Thay vào đó đơn giản trên ():

$('#modal').on 'shown.bs.modal', ->

Sử dụng trên () với phần tử được ủy quyền:

$('body').on 'shown.bs.modal', '#modal', ->

Có vẻ là do hoạt hình phương thức được bật ( fadetrong lớp của hộp thoại), sau khi gọi.modal('show') , hộp thoại không hiển thị ngay lập tức, vì vậy nó không thể lấy nét vào lúc này.

Tôi có thể nghĩ ra hai cách để giải quyết vấn đề này:

1. Xóa fadekhỏi lớp, vì vậy hộp thoại sẽ hiển thị ngay sau khi gọi .modal('show'). Bạn có thể xem http://codebins.com/bin/4ldqp7x/4 để xem demo. (Xin lỗi @keyur, tôi đã chỉnh sửa và lưu nhầm thành phiên bản mới của ví dụ của bạn)
2. Gọi focus()trong shownsự kiện như những gì @keyur đã viết.

Tôi đã tạo một cách năng động để gọi từng sự kiện tự động. Nó hoàn hảo để tập trung vào một lĩnh vực, bởi vì nó gọi sự kiện chỉ một lần, loại bỏ nó sau khi sử dụng.

function modalEvents() {
    var modal = $('#modal');
    var events = ['show', 'shown', 'hide', 'hidden'];

    $(events).each(function (index, event) {
        modal.on(event + '.bs.modal', function (e) {
            var callback = modal.data(event + '-callback');
            if (typeof callback != 'undefined') {
                callback.call();
                modal.removeData(event + '-callback');
            }
        });
    });
}

Bạn chỉ cần gọi modalEvents()trên tài liệu đã sẵn sàng.

Sử dụng:

$('#modal').data('show-callback', function() {
    $("input#photo_name").focus();
});

Vì vậy, bạn có thể sử dụng cùng một phương thức để tải những gì bạn muốn mà không phải lo lắng về việc loại bỏ các sự kiện mỗi lần.

Tôi gặp vấn đề tương tự với bootstrap 3 và đã giải quyết như thế này:

$('#myModal').on('shown.bs.modal', function (e) {
    $(this).find('input[type=text]:visible:first').focus();
})

$('#myModal').modal('show').trigger('shown');

Bootstrap đã thêm một sự kiện được tải.

https://getbootstrap.com/docs/3.3/javascript/#modals

nắm bắt sự kiện 'oad.bs.modal' trên phương thức

$('#mymodal').on('loaded.bs.modal', function(e) {
  // do cool stuff here all day… no need to change bootstrap
})

Sự kiện chương trình Bootstrap

$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();

})

Một giải pháp mô-đun sạch hơn và nhiều hơn có thể là:

$(document).ready(function(){
    $('.modal').success(function() { 
        $('input:text:visible:first').focus();
    });  
});

Hoặc sử dụng ID của bạn làm ví dụ thay thế:

$(document).ready(function(){
    $('#modal-content').modal('show').success(function() {
        $('input:text:visible:first').focus();
    });  
});

Mong rằng sẽ giúp ..