Boîte de dialogue jQuery UI Dialog et Textarea Issue

Question

Je travaille sur un système de commentaire modal utilisant jQuery et jQuery UI, mais j'ai quelques problèmes avec focus. J'ai une série de divs à l'intérieur du modal pour basculer entre Connexion et Ajouter un commentaire, comme ci-dessous:

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

A l'intérieur du addCommentBox div, j'ai le code de commentaire:

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

La question est-ce environ la moitié du temps après l'ouverture du dialogue, la zone de texte à l'intérieur de la div addCommentBox ne réagit pas aux entrées du clavier lorsqu'il est sélectionné. La souris fonctionne correctement et permettra de sélectionner du texte, mais le contrôle du clavier ne fait rien.

Je n'ai aucun écouteur d'événement sur la zone de texte. J'en ai sur les boutons, mais ils ne ciblent que les boutons. La seule chose qui arrive dans le HTML semble être le fait que chaque fois que je clique sur le modal, l'index z augmente pour la div modale globale. J'ai mis le div addCommentBox pour avoir un z-index de 9999, plus grand que l'index z du modal.

Des suggestions ou des itinéraires pour la recherche sur ce site sont grandement appréciés. Merci!

Answer 1

Si ça se passe "la moitié du temps" c'est dur. Testez-le sur d'autres navigateurs pour voir si la même chose se produit.

Answer 2

Comment caches-tu loginBox et commentReview? Si vous utilisez l'opacité, il se peut que quelque chose que vous ne pouvez pas voir soit assis au-dessus de la zone de texte.

Vous ne verrez pas les éléments avec une opacité de 0, mais ils sont toujours là à tous les autres égards. Ils accepteront les événements souris, vous empêchant de cliquer sur la zone de texte.

Si vous pouvez voir la zone de texte, cela ne me semble pas être un problème lié à l'index z.

Answer 3

Lors de l'ouverture de la boîte de dialogue, essayez de faire la mise au point de la zone de texte pendant la fonction "Ouvrir".

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

Answer 4

Cela ressemble au problème avec quelque chose d'autre sur la page. Avez-vous testé cela en mettant la fonctionnalité ci-dessus sa propre page séparée de toutes les autres fonctionnalités?

Answer 5

Essayez de définir la propriété TABINDEX de la zone de texte si elle n'est pas définie.