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设置为z-index为9999，大于模态的z-index。

非常感谢任何建议或研究方向。谢谢！

Answer 1

如果它发生在“一半的时间”，这是一个艰难的。在其他一些浏览器上测试它，看看是否发生了同样的事情。

Answer 2

你是如何隐藏loginBox和commentReview的？如果您正在使用不透明度，那么您可能无法看到的东西就位于文本区域的顶部。

你不会看到不透明度为0的元素，但它们仍然存在于其他所有方面。他们将接受鼠标事件，阻止您点击textarea。

如果你能看到textarea，那么它对我来说听起来不像z-index问题。

Answer 3

打开对话框时，尝试在“打开”功能期间将文本框聚焦。

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

Answer 4

听起来问题在于页面上的其他内容。您是否通过将上述功能与其他所有功能分开来测试了这一点？

Answer 5

如果没有设置，请尝试设置textarea的TABINDEX属性。

jQuery UI对话和Textarea焦点问题

5 个答案: