Nie można ustawić fokusu na pole formularza w oknie dialogowym interfejsu użytkownika jQuery po kliknięciu elementu menu jQueryUI.

Question

Mam okno dialogowe interfejsu użytkownika jQuery zawierające formularz jedno pole, a właściwość autoOpen jest ustawiona na wartość false na początku. Na stronie jest inne menu interfejsu jQuery, a otwarta funkcja okna dialogowego jest powiązana ze zdarzeniem kliknięcia pozycji menu. Próbowałem ustawić fokus na jedyne pole formularza w oknie dialogowym, gdy okno dialogowe jest otwarte po kliknięciu pozycji menu jakoś nie ma szczęścia. Aby wskazać przyczynę, dodałem kolejny przycisk testowy i klikając ten przycisk, mogę ustawić ostrość na polu formularza. Jestem więc pewien, że to menu interfejsu jQuery zapobiega ustawianiu ostrości w polu. Zastanawiam się, czy istnieje jakiś sposób na obejście tego ograniczenia. Wszelkie docenienia jest doceniane. Dzięki!

html:

<ul id="menu"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
</ul> 
</br> 
<button id="btn">Open the dialog</button> 

<div id="dialog" title="Basic dialog"> 
    <form> 
     <input type="text" id="fld" /> 
    </form> 
</div> 

javascript:

$("#dialog").dialog({ 
    autoOpen: false, 
    open: function(event, ui){ 
     $('#fld').focus(); 
    } 
}); 

$('#btn').click(function(e){ 
    $("#dialog").dialog('open'); 
}); 

$('#menu li a').click(function(){ 
    $("#dialog").dialog('open'); 
}) 

$("#menu").menu({ 
    select: function(event, ui) { 
     $("#dialog").dialog('open'); 
    } 
}); 

Oto js fiddle

Answer 1

Interesujące.

Jakimś sposobem menu jQuery wpływa na ostrość. Patrzyłem na twoje skrzypce i odkryłem, że nawet jeśli opóźnisz fokus 1 milisekundę, to działa.

Spójrz na to.

$("#dialog").dialog({ 
    autoOpen: false, 
    open: function(event, ui){ 
     setTimeout(function(){$('#fld').focus();},1); 
    } 
}); 

$('#btn').click(function(e){ 
    $("#dialog").dialog('open'); 
}); 

$('#menu li a').click(function(){ 
    $("#dialog").dialog('open'); 
}) 

$("#menu").menu(); 

http://jsfiddle.net/XMEWu/1/

Answer 2

Zastosowanie w oknie dialogowym Page

$(window).load(function() { 
    //Use Focus as $("#stsr").focus(); 
} 

Answer 3

Ten doprowadzało mnie do szału. Oto, co naprawiłem dla mnie (bardziej ogólna wersja odpowiedzi @ Trevora).

$('#element').dialog({ 
    open: function() {       
    //focus fix 
    $('textarea, input', $(this)).click(function() { 
     var $inp = $(this); 
     setTimeout(function() { 
      $inp.focus(); 
     }, 1); 
    });       
    } 
});