javascript - Hvordan sette fokus på et bestemt felt i en Bootstrap-modal når den vises

Jeg har sett et par spørsmål angående bootstrap-modaler, men ingen helt som dette, så jeg går videre.

Jeg har en modal som jeg kaller onclick slik...

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

Dette fungerer fint, men når jeg viser modalen vil jeg fokusere på det første input-elementet... I mitt tilfelle har det første input-elementet en id på #photo_name.

Så jeg prøvde

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

Men dette var forgjeves. Til slutt prøvde jeg å knytte til 'show'-hendelsen, men selv da vil ikke inputen få fokus. Til slutt, bare for testing, siden jeg hadde en mistanke om at dette handler om rekkefølgen på js-lasting, satte jeg inn en setTimeout bare for å se om jeg forsinker ett sekund, vil fokuset fungere, og ja, det fungerer! Men denne metoden er åpenbart dårlig. Finnes det en måte å få samme effekt som nedenfor uten å bruke en setTimeout?

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

Svar #1

Prøv dette

Her er den gamle DEMO:

REDIGER: (Her er en fungerende DEMO med Bootstrap 3 og jQuery 1.8.3)

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

Starter Bootstrap 3 trenger å bruke shown.bs.modal-hendelsen:

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

Svar #2

Ville bare si at Bootstrap 3 håndterer dette litt annerledes. Hendelsesnavnet er "shown.bs.modal".

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

eller sett fokus på det første synlige inndatafeltet slik:

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

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

Svar #3

Jeg bruker dette i oppsettet mitt for å fange alle modaler og fokusere på det første inngangsfeltet

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

Relaterte artikler