jqueryui對話框無法在Firefox中選擇（）輸入11

Question

我在Windows 7的Firefox 11中運行此代碼。（請參閱http://jsfiddle.net/QStkd/）。

$('<div><input type="text" value="val" /></div>').dialog(); 

在輸入的值沒有被選擇，這在瀏覽器和IE瀏覽器做的，它也不會如果我手動調用select()方法工作。

這是一個已知的問題？有什麼辦法可以選擇它嗎？ Timers work，但如果我在jsfiddle上點擊run後它加載它不再工作。

Answer 1

它看起來像在Chrome上調用focus()（其中jquery-ui默認爲第一個tabbable元素）（無法在OS X上測試IE），將該框對焦並選擇框內的文本。

從jquery.dialog.ui.js摘自：

// set focus to the first tabbable element in the content area or the first button 
// if there are no tabbable elements, set focus on the dialog itself 
$(self.element.find(':tabbable').get().concat(
    uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
     uiDialog.get()))).eq(0).focus(); 

火狐，在另一方面，似乎呼籲的焦點時，僅將光標放在盒子內。因此，在創建對話框後，您必須調用隱式調用select來實現您想要執行的操作。

如果你重新加載你的定時器小提琴（而不是點擊運行），你會發現這個例子每次都有效。我認爲jsFiddle實際上是這裏的罪魁禍首（可能是hashchange事件，或者在按下'run'之後的一個窗格上的某個焦點事件 - 我還沒有深入挖掘過）。

編輯 :(對不起，它晚了）看起來「問題」的根本原因是Firefox。不知道這是否是設計行爲，但從我所看到的，看起來像Firefox 將不允許文本在同一頁面上同時在不同內容窗格中的兩個不同輸入元素中選擇。這似乎不會影響Chrome（並且，假設是IE9）。

我在本地做了一個快速示例，它並排放置兩個iframe（讓我們稱它們爲左右）。左側包含一個textarea，右側包含您的jquery-ui對話框 - 與您發佈的小提琴類似。右邊有下面的代碼：

<script type="text/javascript"> 
$('<div><input type="text" value="val" /></div>').dialog(); 
$('input').select(); 
</script> 

左邊有下面的代碼：

<script type="text/javascript"> 
setTimeout(function() { 
    $('textarea').focus(); 
}, 1000); 
</script> 

如果拼湊這些檢查出來的結果在Firefox中，你會發現，在輸入集中和選擇直到左邊的textarea被集中。我懷疑jsFiddle發生了類似這樣的事情。

Answer 2

嘗試使用UI對話框的open事件。 當打開對話框時觸發此事件。

$('<div><input id="yourInput" type="text" value="val" /></div>').dialog({ 
    open:function(){ 
    $("#yourInput").focus().select(); 
    } 
     } 
) 

http://jsfiddle.net/sergeir82/A6Wah/8/

http://jsbin.com/etivej/4/

Answer 3

這是在DOM確定是否已經設置了一個DOCTYPE FF問題。沒有很好的方法來解決它，一個重點定時器往往是「黑客」。不過還有一步，如果您的文檔類型設置爲w3 xhtml標準，則可以使用this來選擇焦點。將onfocus="this.select();"作爲輸入的屬性添加，以便在關注時立即選中它。