วิธีตั้งค่าโฟกัสเป็นอินพุตข้อความแรกในโมดอล bootstrap หลังจากที่แสดง

ฉันโหลดโมดอล bootstrap แบบไดนามิกและมีอินพุตข้อความน้อย ปัญหาที่ฉันพบว่าต้องการให้เคอร์เซอร์โฟกัสที่อินพุตแรกในโมดอลนี้และสิ่งนี้จะไม่เกิดขึ้นตามค่าเริ่มต้น
ดังนั้นฉันจึงเขียนโค้ดนี้เพื่อทำ:

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

แต่ตอนนี้โฟกัสที่อินพุทสักครู่แล้วหายไปโดยอัตโนมัติเหตุใดจึงเกิดขึ้นและจะแก้อย่างไร

@scumah มีคำตอบให้คุณ: Twitter bootstrap - มุ่งเน้นไปที่ textarea ภายในโมดอลเมื่อคลิก

สำหรับ Bootstrap 2

modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});  

อัปเดต: สำหรับ Bootstrap 3

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

========== Update ======

ในการตอบคำถามคุณสามารถใช้สิ่งนี้กับโมดอลหลายตัวในเพจเดียวกันได้หากคุณระบุเป้าหมายข้อมูลที่แตกต่างกันเปลี่ยนชื่อรหัสโมดอลของคุณเพื่อจับคู่และอัปเดต ID ของช่องป้อนแบบฟอร์มและสุดท้ายอัปเดต JS ของคุณให้ตรงกับใหม่เหล่านี้ ID:
ดูhttp://jsfiddle.net/panchroma/owtqhpzr/5/

HTML

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

JS

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

ฉันพบวิธีที่ดีที่สุดในการทำสิ่งนี้โดยไม่ต้องใช้ jQuery

<input value="" autofocus>

ทำงานได้อย่างสมบูรณ์

นี่คือแอตทริบิวต์ html5 รองรับโดยเบราว์เซอร์หลักทั้งหมด
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

คำตอบของ David Taiaroa ถูกต้อง แต่ไม่ได้ผลเนื่องจากเวลา "จางหายไป" โมดอลไม่อนุญาตให้คุณกำหนดโฟกัสที่อินพุต คุณต้องสร้างความล่าช้า:

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

})

รหัสปกติ (ด้านล่าง) ใช้ไม่ได้สำหรับฉัน:

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

ฉันพบวิธีแก้ปัญหา :

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})

ดูเพิ่มเติมที่นี่

ฉันได้รับ bootstrap เพิ่มข้อมูลต่อไปนี้ในหน้าของพวกเขา:

เนื่องจาก HTML5 กำหนดความหมายของมันอย่างไรแอตทริบิวต์ HTML ของโฟกัสอัตโนมัติจึงไม่มีผลในโหมด Bootstrap เพื่อให้ได้เอฟเฟกต์เดียวกันให้ใช้ JavaScript ที่กำหนดเอง:

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

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

นี่คือรหัสง่ายๆที่จะเหมาะกับคุณมากที่สุดกับป๊อปอัปทั้งหมดที่มีช่องป้อนข้อมูลใด ๆ โดยเน้นที่มัน

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

ฉันคิดว่าคำตอบที่ถูกต้องที่สุดโดยถือว่าการใช้ jQuery คือการรวมแง่มุมของคำตอบทั้งหมดในหน้านี้รวมทั้งการใช้เหตุการณ์ที่ Bootstrap ผ่าน:

$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});

นอกจากนี้ยังจะทำงานที่เปลี่ยนแปลง$(document)ไป$('.modal')หรือเพื่อเพิ่มระดับให้เป็นกิริยาช่วยว่าสัญญาณที่โฟกัสนี้ควรจะเกิดขึ้นเช่น$('.modal.focus-on-first-input')

ลองใช้รหัสนี้อาจเหมาะกับคุณ

$(this).find('input:text')[0].focus();

ขั้นแรกคุณต้องตั้งค่าautofocusแอตทริบิวต์ของคุณในการป้อนแบบฟอร์ม

<input name="full_name" autofocus/>

จากนั้นคุณต้องเพิ่มการประกาศเพื่อตั้งค่าโฟกัสอัตโนมัติของอินพุตของคุณหลังจากที่โมดอลของคุณแสดงขึ้น
ลองใช้รหัสนี้:

$(document).on('ready', function(){
    // Set modal form input to autofocus when autofocus attribute is set
    $('.modal').on('shown.bs.modal', function () {
        $(this).find($.attr('autofocus')).focus();
    });
});

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

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

หากคุณกำลังมองหาตัวอย่างข้อมูลที่ใช้ได้กับโมดอลทั้งหมดของคุณและค้นหาโดยอัตโนมัติสำหรับข้อความอินพุตที่ 1 ในอันที่เปิดอยู่คุณควรใช้สิ่งนี้:

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

หากโมดอลของคุณโหลดโดยใช้ ajax ให้ใช้สิ่งนี้แทน:

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

นี่เป็นวิธีแก้ปัญหาทั่วไปที่สุด

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

• ทำงานร่วมกับโมดอลที่เพิ่มใน DOM หลังจากโหลดหน้า
• ใช้งานได้กับอินพุต textarea เลือกและไม่ใช้ปุ่ม
• ommits ซ่อนปิดใช้งานอ่านอย่างเดียว
• ใช้งานได้กับ faded modals ไม่จำเป็นต้อง setInterval

พยายามลบคุณสมบัติ tabIndex ของโมดอลเมื่ออินพุต / กล่องข้อความของคุณเปิดอยู่ ตั้งค่าให้กลับไปเป็นเหมือนเดิมเมื่อคุณปิด input / textbox นี้จะแก้ไขปัญหารุ่นบูตโดยไม่คำนึงถึงและไม่สูญเสียการไหลของประสบการณ์ของผู้ใช้

ตามเอกสาร Bootstrap 4:

เนื่องจาก HTML5 กำหนดความหมายของมันอย่างไรแอตทริบิวต์ HTML ของโฟกัสอัตโนมัติจึงไม่มีผลในโหมด Bootstrap เพื่อให้ได้เอฟเฟกต์เดียวกันให้ใช้ JavaScript ที่กำหนดเอง

เช่น:

$('#idOfMyModal').on('shown.bs.modal', function () {
    $('input:first').trigger('focus')
});

ลิงค์ .

ใช้โฟกัสอัตโนมัติเพื่อค้นหาองค์ประกอบรูปแบบที่ถูกต้อง:

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});

• มันคือ "#button" ที่เรียกรูปแบบโมดอล

• "#mymodal" คือรูปแบบกิริยา

• "#myinput" คืออินพุตที่คุณต้องการโฟกัส