jQuery UI Dialog и Textarea Focus Issue

Question

Я работаю над модальной системой комментариев, использующей jQuery и jQuery UI, но у меня есть некоторые проблемы с фокусом. У меня есть серия div внутри модального режима для переключения между Login и Add comment, как показано ниже:

<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, это тот факт, что каждый раз, когда я нажимаю на модал, z-индекс увеличивается для всего модального div. Я установил для дивизиона addCommentBox z-индекс 9999, больше, чем z-индекс модала.

Будем весьма благодарны за любые предложения или указания по исследованию. Спасибо!

Answer 1

Если это происходит "наполовину", это тяжело. Протестируйте его в некоторых других браузерах, чтобы увидеть, происходит ли то же самое.

Answer 2

Попробуйте установить свойство TABINDEX для текстовой области, если оно не установлено.

Answer 3

Похоже, проблема в чем-то другом на странице. Вы проверили это, поместив вышеуказанную функцию на отдельную страницу, отличную от всех других функций?

Answer 4

При открытии диалогового окна попробуйте сфокусировать текстовое поле во время функции «открыть».

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

Answer 5

Как вы прячете loginBox и commentReview? Если вы используете непрозрачность, возможно, что то, что вы не видите, находится поверх текстовой области.

Вы не увидите элементы с непрозрачностью 0, но они все еще там во всех остальных отношениях. Они будут принимать события мыши, мешая вам нажать на текстовую область.

Если вы видите текстовую область, то это не похоже на проблему с z-индексом.