J'utilise actuellement la boîte modale JQuery Ui.
Je me demande comment je peux définir la mise au point sur le premier élément de forme de la boîte modale lors de l'ouverture de la boîte de dialogue, je pense que cela se produise par défaut mais pour une raison quelconque, ce n'est pas le cas.
Comment puis-je définir l'interface utilisateur JQuery pour vous concentrer sur le premier élément de forme lors de l'ouverture?
Voici l'URL à la page avec la boîte de dialogue modale Cliquez simplement sur le lien Afficher la boîte de dialogue. sur cette page
8 Réponses :
Vous pouvez utiliser l'événement ouvert dans la boîte de dialogue JQuery UI et définir l'accent sur l'ID d'entrée. Vous pouvez faire quelque chose comme ça.
Ajoutez une fonction Lié à l'événement affiché, puis définissez la mise au point
Par défaut, le modal de l'interface utilisateur JQuery se concentrera sur le premier champ de saisie dans le modal.
Si, pour une raison quelconque, le premier champ de saisie n'a pas été mis à jour, vous pouvez ajouter l'attribut d'entrée autofocus strong> sur le premier champ de saisie: p> Ou si vous avez besoin du deuxième ou d'un autre champ d'entrée pour se concentrer à la place, appliquez l'attribut d'entrée autofocus strong> au deuxième champ d'entrée: p> <input type="text" name="date" value="">
<input type="text" name="phone" value="" autofocus>
J'ai essayé cela et l'accent a effectivement atterri sur l'élément que j'ai ajouté de la mise au point automatique. Cependant, une seconde plus tard, l'accent a disparu ...
Votre ensemble DocType est-il défini pour HTML5 . .. Avez-vous un autre code JS donnant l'accent sur votre page? Utilisez-vous également la dernière version de la boîte de dialogue JQuery et JQuery UI?
Merci pour la réponse, à la fin, je devais me concentrer à l'aide du rappel d'événement "montré.bs.modal" pour ajouter l'accent à l'élément. $ ('# login-modal'). Sur ("montré.bs.modal ', fonction () {$ (" # user_session_email "). Focus ();});
Cela fonctionne bien pour moi. J'aime des exemples comme celui-ci, propre, simple et travail pour la première fois. Merci bourgeon :)
Pas de soucis @ user985197, heureux d'aider!
Je recommande d'utiliser l'option "Ouvrir" de la fonction dans la boîte de dialogue.
Essayez cela, concentrez-vous sur JQUERY MODAL:
setTimeout(function () { $('#cntrlId').focus(); }, 1);
Dû utiliser celui-ci pour en utilisant plus d'un modal, l'un après l'autre. Appelez la boîte de dialogue, puis le délai d'attente
Merci pour la réponse, à la fin, je devais me concentrer à l'aide du rappel d'événement "montré.bs.modal" pour ajouter l'accent à l'élément.
$('#login-modal').on('shown.bs.modal', function () {
$("#user_session_email").focus();
});
C'est une boîte de dialogue Bootstrap, pas une boîte de dialogue UI de JQuery régulière.
Merci pour cela pour une référence bootstrap, pour une raison quelconque, cela doit être fait sur l'événement montré. Il ne fixera pas la mise au point si défini implicitement par exemple sur l'événement de clic qui ouvre le modal.
Ajouter une fonction sur la boîte de dialogue Ouvrir
$("#dialogMensaje").dialog({width: 600,
title: "Notificación",
modal: true,
buttons: {
"Enviar": function() {
$(this).dialog("close");
}
},
open: function() {
setTimeout(function() {
$('#txt').focus();
}, 420);
}
});
Il faut environ 460ms pour montrer complètement la boîte de dialogue, il est donc préférable d'utiliser