jQuery UI對話和Textarea焦點問題

Question

我正在使用jQuery和jQuery UI開發模態注釋系統，但我有一些焦點問題。 我在模態中有一系列div來在Login和Add注釋之間切換，如下所示：

<div id="modal" title="Loading">
 <div id="modalContent"></div>

 <div id="modalLogin">
  <div class="loginBox"></div>
  <div class="addCommentBox"></div>
  <div class="commentReview"></div>
 </div>
</div>

在addCommentBox div里面，我有評論代碼：

 <form action="/comments/add" class="addCommentForm" name="addCommentForm" method="post">
  <textarea name="content" class="addCommentContent"></textarea>
  <button value="Add Comment" type="submit" class="commentPost"/>
  <button value="Clear Comment" type="submit" id="clearComment"/>
 </form>

問題是打開對話框后大約一半的時間， addCommentBox div中的textarea在選擇時不會對鍵盤輸入做出反應。 鼠標正常工作，將允許選擇文本，但鍵盤控制不執行任何操作。

我在textarea上沒有事件監聽器。 我在按鈕上有一些，但它們只針對按鈕。

HTML中唯一發生的事情似乎是每次點擊模態時，z-index會增加整個模態div。 我已經將addCommentBox div設置為具有9999的z-index，大於模態的z-index。

任何建議或研究方向將不勝感激。 謝謝！

Answer 1

如果它發生在“一半的時間”，這是一個艱難的。 在其他一些瀏覽器上測試它，看看是否發生了同樣的事情。

Answer 2

你是如何隱藏loginBox和commentReview的？ 如果你正在使用不透明度，那么你可能看不到的東西就是坐在textarea的頂部。

你不會看到不透明度為0的元素，但它們仍然存在於其他所有方面。 他們將接受鼠標事件，阻止您點擊textarea。

如果你能看到textarea，那對我來說聽起來不像是z-index問題。

Answer 3

打開對話框時，嘗試在“打開”功能期間將文本框聚焦。

$('#modal').dialog({
    open: function () {
        $('textarea[name=content]').focus();
    }
});

Answer 4

聽起來像問題在於頁面上的其他內容。 您是否通過將上述功能與其他所有功能分開來測試了這一點？

Answer 5

如果未設置，請嘗試設置textarea的TABINDEX屬性。