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属性。