I'm working on a modal ment 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 ment, as below:

<div id="modal" title="Loading">
 <div id="modalContent"></div>

 <div id="modalLogin">
  <div class="loginBox"></div>
  <div class="addCommentBox"></div>
  <div class="mentReview"></div>
 </div>
</div>

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

 <form action="/ments/add" class="addCommentForm" name="addCommentForm" method="post">
  <textarea name="content" class="addCommentContent"></textarea>
  <button value="Add Comment" type="submit" class="mentPost"/>
  <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!

I'm working on a modal ment 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 ment, as below:

<div id="modal" title="Loading">
 <div id="modalContent"></div>

 <div id="modalLogin">
  <div class="loginBox"></div>
  <div class="addCommentBox"></div>
  <div class="mentReview"></div>
 </div>
</div>

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

 <form action="/ments/add" class="addCommentForm" name="addCommentForm" method="post">
  <textarea name="content" class="addCommentContent"></textarea>
  <button value="Add Comment" type="submit" class="mentPost"/>
  <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!

• javascript
• jquery
• jquery-ui
• dialog
• textarea

Share Improve this question Follow asked Jan 27, 2010 at 16:53 Andrew AndersonAndrew Anderson 44144 silver badges1414 bronze badges 4

• 1 please provide an example failing: jsfiddle – Markus Commented Apr 19, 2011 at 17:04
• 1 you mite want to add which jQuery UI version, which jQuery version. – potatopeelings Commented Apr 20, 2011 at 6:10
• you might want to check the z-index of the overlay too $(".ui-widget-overlay").css("z-index") – potatopeelings Commented Apr 20, 2011 at 6:28
• This particular problem is over a year old, the project has been live without issue for roughly that amount of time, and I've been unable to replicate the issue. Sorry, but this question is officially nil for me. What's the convention on Stack Overflow to take care of this? – Andrew Anderson Commented Apr 22, 2011 at 15:11

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

How are you hiding loginBox and mentReview? 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.

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

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

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?

Try setting the TABINDEX property of the textarea if it's not set.