jQuery UI对话和Textarea焦点问题

Question

I'm working on a modal comment system using jQuery and jQuery UI, but I'm having some issues with focus. I have a series of divs inside the modal to switch between Login and Add comment, as below:

<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>

Inside of the addCommentBox div, I've got the comment code:

 <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>

The issue is that about half the time after opening the dialog the textarea inside the addCommentBox div doesn't react to keyboard inputs when selected. The mouse works correctly and will allow text to be selected, but keyboard control does nothing.

I have no event listeners on the textarea. I've got some on the buttons, but they are targeting only the buttons.

The only thing that happens in the HTML seems to be the fact that every time I click on the modal, the z-index increases for the overall modal div. I have set the addCommentBox div to have a z-index of 9999, greater than the z-index of the modal.

Any suggestions or directions to research would be greatly appreciated. Thanks!

Answer 1

If it's happening "half the time" that's a hard one. Test it on some other browsers to see if the same thing happens.

Answer 2

How are you hiding loginBox and commentReview? If you're using opacity it may be that something you can't see is sitting on top of the textarea.

You won't see elements with opacity of 0, but they're still there in every other respect. They will accept mouse events, stopping you from clicking on the textarea.

If you can see the textarea, then it doesn't sound like a z-index issue to me.

Answer 3

When opening the dialog, try focusing the textbox during on the "open" function.

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

Answer 4

Sounds like the problem is with something else on the page. Have you tested this by putting the above feature it's own page separate from all other functionality?

Answer 5

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