วิธีการตั้งค่าโฟกัสสำหรับฟิลด์เฉพาะใน Modal Bootstrap เมื่อมันปรากฏขึ้น

ฉันเคยเห็นคำถามสองสามข้อเกี่ยวกับวิธีการ bootstrap แต่ไม่มีใครเหมือนนี้ดังนั้นฉันจะไป

ฉันมีคำกริยาที่เรียกว่า onclick อย่างนั้น ...

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

สิ่งนี้ทำงานได้ดี แต่เมื่อฉันแสดงโมดอลฉันต้องการที่จะมุ่งเน้นไปที่องค์ประกอบอินพุตแรก ... ในกรณีที่องค์ประกอบอินพุตแรกมี id #photo_name

ดังนั้นฉันจึงพยายาม

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

แต่นี่ไม่เป็นประโยชน์ ท้ายสุดฉันพยายามผูกไว้กับเหตุการณ์ 'โชว์' แต่ถึงอย่างนั้นอินพุตก็จะไม่โฟกัส ในที่สุดสำหรับการทดสอบเนื่องจากฉันสงสัยว่านี่เป็นเรื่องเกี่ยวกับการโหลด js ฉันใส่ setTimeout เพื่อดูว่าฉันหน่วงเวลาหนึ่งวินาทีโฟกัสจะทำงานหรือไม่และทำงานได้! แต่วิธีนี้เห็นได้ชัดว่าอึ มีวิธีการที่จะมีผลเช่นเดียวกับด้านล่างโดยไม่ใช้ setTimeout หรือไม่?

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

ลองสิ่งนี้

นี่คือเก่าDEMO :

แก้ไข: (นี่คือการทำงานDEMOกับเงินทุนที่ 3 และ jQuery 1.8.3)

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

การเริ่มต้น bootstrap 3 จำเป็นต้องใช้งานแสดง

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

แค่อยากบอกว่า Bootstrap 3 จัดการสิ่งนี้ได้แตกต่างกันเล็กน้อย ชื่อเหตุการณ์คือ "แสดงขึ้น .bs.modal"

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

หรือวางโฟกัสบนอินพุตแรกที่มองเห็นได้ดังนี้:

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

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

ฉันใช้สิ่งนี้ในการจัดวางเพื่อจับโมดัลทั้งหมดและมุ่งเน้นไปที่อินพุตแรก

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

ฉันมีปัญหาเดียวกันกับ bootstrap 3 โฟกัสเมื่อฉันคลิกลิงก์ แต่ไม่ใช่เมื่อเรียกเหตุการณ์ด้วย javascript การแก้ไขปัญหา:

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

อาจเป็นเรื่องเกี่ยวกับอนิเมชั่น!

ฉันมีปัญหาในการจับ "แสดง .bs.modal" เหตุการณ์ .. และนี่คือทางออกของฉันซึ่งทำงานได้สมบูรณ์แบบ ..

ง่าย ๆ แทนใน ():

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

ใช้บน () กับองค์ประกอบที่ได้รับมอบหมาย:

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

ดูเหมือนว่าเป็นเพราะภาพเคลื่อนไหวกิริยาถูกเปิดใช้งาน ( fadeในคลาสของกล่องโต้ตอบ) หลังจากโทร.modal('show')แล้วจะไม่สามารถมองเห็นกล่องโต้ตอบได้ทันทีดังนั้นจึงไม่สามารถรับโฟกัสได้ในขณะนี้

ฉันสามารถคิดถึงวิธีแก้ปัญหานี้สองวิธี:

1. ลบออกจากชั้นเรียนเพื่อโต้ตอบจะมองเห็นได้ทันทีหลังจากที่โทรfade .modal('show')คุณสามารถดูhttp://codebins.com/bin/4ldqp7x/4สำหรับการสาธิต (ขออภัย @keyur ฉันแก้ไขและบันทึกเป็นตัวอย่างรุ่นใหม่ของคุณโดยไม่ตั้งใจ)
2. โทรfocus()ในshownเหตุการณ์เหมือนสิ่งที่ @keyur เขียน

ฉันได้สร้างวิธีไดนามิกในการโทรแต่ละเหตุการณ์โดยอัตโนมัติ มันสมบูรณ์แบบเพื่อมุ่งเน้นฟิลด์เพราะมันเรียกเหตุการณ์เพียงครั้งเดียวลบออกหลังจากการใช้งาน

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

คุณเพียงแค่ต้องโทรหาmodalEvents()เอกสารพร้อม

ใช้:

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

ดังนั้นคุณสามารถใช้คำกริยาเดิมเพื่อโหลดสิ่งที่คุณต้องการโดยไม่ต้องกังวลกับการลบกิจกรรมทุกครั้ง

ฉันมีปัญหาเดียวกันกับ bootstrap 3 และแก้ไขเช่นนี้

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

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

Bootstrap ได้เพิ่มเหตุการณ์ที่โหลด

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

จับภาพเหตุการณ์ 'load.bs.modal' บน modal

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

Bootstrap modal show event

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

})

น้ำยาทำความสะอาดเล็กน้อยและโซลูชั่นแบบแยกส่วนเพิ่มเติมอาจเป็น:

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

หรือใช้ ID ของคุณเป็นตัวอย่างแทน:

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

หวังว่าจะช่วย ..