jQuery UI 对话框和 Textarea 焦点问题答案

【问题标题】：jQuery UI Dialog and Textarea Focus IssuejQuery UI 对话框和 Textarea 焦点问题
【发布时间】：2011-01-10 01:28:51
【问题描述】：

我正在使用 jQuery 和 jQuery UI 开发一个模态评论系统，但我遇到了一些焦点问题。我在模态框内有一系列 div 可以在登录和添加评论之间切换，如下所示：

<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 上没有事件监听器。我有一些按钮，但它们只针对按钮。

在 HTML 中发生的唯一事情似乎是每次我单击模态框时，整个模态 div 的 z-index 都会增加。我已将addCommentBox div 的 z-index 设置为 9999，大于模态的 z-index。

任何建议或研究方向将不胜感激。谢谢！

【问题讨论】：

请提供一个失败的例子：jsfiddle.net
你想添加哪个jQuery UI版本，哪个jQuery版本。
您可能还想检查叠加层的 z-index $(".ui-widget-overlay").css("z-index")
这个特殊问题已经存在一年多了，该项目已经运行了大约这段时间，没有问题，我无法复制该问题。对不起，但这个问题对我来说正式为零。 Stack Overflow 上处理这个问题的惯例是什么？

标签： javascript jquery jquery-ui dialog textarea

【解决方案1】：

如果它“有一半时间”发生，那就很难了。在其他一些浏览器上进行测试，看看是否会发生同样的事情。

【讨论】：

发生“一半时间”表明可能存在某种竞争条件。

【解决方案2】：

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

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

如果您可以看到文本区域，那么对我来说这听起来不像是 z-index 问题。

【讨论】：

【解决方案3】：

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

$('#modal').dialog({ 打开：函数（）{ $('textarea[name=content]').focus(); } });

【讨论】：

【解决方案4】：

听起来问题出在页面上的其他内容上。您是否通过将上述功能与所有其他功能分开放置在它自己的页面上来对此进行测试？

【讨论】：

【解决方案5】：

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

【讨论】：