Der Fokus kann nicht auf ein Formularfeld in einem jQuery-UI-Dialogfeld beim Klicken auf einen jQueryUI-Menüeintrag gesetzt werden.

Question

Ich habe ein jQuery UI-Dialogfeld mit einem Einfeldformular, und die autoOpen -Eigenschaft wird am Anfang auf false gesetzt. Es gibt ein weiteres jQuery UI-Menü auf der Seite und die offene Funktion des Dialogfelds ist an das click -Ereignis der Menüelemente gebunden. Ich habe versucht, den Fokus auf das einzige Formularfeld des Dialogs zu setzen, wenn der Dialog beim Anklicken der Menüpunkte irgendwie kein Glück hat. Um die Ursache genau zu bestimmen, habe ich auch eine weitere Test-Schaltfläche hinzugefügt und durch Klicken auf diese Schaltfläche kann ich den Fokus auf das Formularfeld setzen. Ich bin mir ziemlich sicher, dass das jQuery UI-Menü den Fokus des Feldes verhindert. Ich frage mich, ob es irgendwie möglich ist, diese Einschränkung zu umgehen. Jeder Einblick wird geschätzt. Vielen Dank!

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

Hier ist die js fiddle

Answer 1

Interessant.

jQuery Menü wirkt sich auf den Fokus irgendwie. Ich habe in deine Geige geschaut und festgestellt, dass selbst wenn du den Fokus 1 Millisekunde verzögst, es funktioniert.

Werfen Sie einen Blick auf diese.

$("#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

Nutzung auf Dialog Seite

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

Answer 3

Dieser fuhr mich verrückt. Hier ist, was es für mich repariert hat (allgemeinere Version von @ Trevors Antwort).

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