無法在單擊jQueryUI菜單項目時在jQuery UI對話框中將焦點設置爲表單字段

我有一個包含單字段窗體的jQuery UI對話框，並且autoOpen屬性在開始時設置爲false。在頁面上還有另一個jQuery UI菜單，對話框的打開功能綁定到菜單項的單擊事件。我一直試圖將焦點設置到對話框的唯一表單域，當對話框打開時點擊菜單項莫名其妙地沒有運氣。爲了查明原因，我還添加了另一個測試按鈕，並通過單擊該按鈕我可以將焦點設置到表單字段。所以我很確定這是jQuery UI菜單，它阻止了該領域的焦點。我想知道是否有辦法繞過這個限制。任何見解都會被讚賞。謝謝！無法在單擊jQueryUI菜單項目時在jQuery UI對話框中將焦點設置爲表單字段

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

這裏是js fiddle

來源

2013-10-01 aarryy

有趣。

jQuery的菜單以某種方式影響着焦點。我正在研究你的小提琴，我發現即使你延遲焦點1毫秒它的工作。

看看這個。

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

來源

2013-10-01 21:29:50 Trevor

嗨@Trevor，我測試你搗鼓出一點點，似乎每個頁面加載時間，在菜單項的第一個點擊不設置焦點和所有的點擊之後很好地工作。這絕對接近我想要的。感謝你的幫助。 – aarryy

嗨@Trevor，我用真正的解決方法測試了您的解決方案，並且出人意料地發揮了作用。看不到這背後的邏輯。這可能是因爲真正的解決方法是不使用完全相同的jQuery和jQuery UI版本。無論如何感謝所有的幫助。 – aarryy

您的歡迎，我的小提琴很奇怪，這對我來說是第一次。去搞清楚。 – Trevor

在對話框頁面

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

來源

2014-08-21 04:50:15

這也是一個很好的解決方案。一些解釋：對話框的打開事件不會「等待」加載html，只要對話框打開就會立即執行，這是真正的問題。在$（窗口）上添加功能。在調用函數之前加載或$（document）.ready到對話框的html等待代碼完全加載，從而解決聚焦不存在的輸入問題。我認爲這可能是更好的解決方案，然後設置超時。 – vove

用這個把我惹火了。這是爲我修復的（更多通用版本@特雷弗的答案）。

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

來源

2015-01-19 23:25:58 lamarant

無法在單擊jQueryUI菜單項目時在jQuery UI對話框中將焦點設置爲表單字段

回答

相關問題