J'ai un formulaire de connexion simple avec 2 champs d'entrée: "Nom d'utilisateur" et "mot de passe". Le champ "Nom d'utilisateur" est concentré par défaut. Le problème est que lorsque l'utilisateur clique sur des champs "Nom d'utilisateur" ou "Mot de passe", l'accent est parti (ce n'est ni sur "Nom d'utilisateur" ni sur "Mot de passe" Champs "). Comment puis-je forcer la mise au point d'être sur ces 2 champs Seulement?
Dans mon cas, c'est un comportement vraiment gênant, alors je veux vraiment faire cela :)
Puis-je faire quelque chose comme: ?
8 Réponses :
Vous pouvez utiliser JavaScript pour définir la mise au point sur la mise au point, mais vous vraiment devriez pas. Forcer la mise au point sur ces champs briserait l'interaction normale de la page. Cela signifierait qu'un utilisateur ne pouvait pas faire quelque chose d'aussi simple que de cliquer sur un lien de la page, car la mise au point serait toujours sur ces entrées.
S'il vous plaît ne le faites pas :)
Si vous voulez vraiment vraiment faire cela (et que vous ne devriez pas) utiliser délégué () A > Au lieu de définir un gestionnaire d'événements distinct sur chaque élément HTML: $('body').delegate('*', 'focus', function() {
if (!$(this).hasClass("my_inputs_class")) {
$('#username').focus();
return false;
}
});
SET flou gestionnaire d'événements afin qu'il ramène la mise au point sur l'une de vos entrées.
Vous pouvez faire comme ceci (en code PSEDEO):
if user ||Â pass blured
if user.len > 0
pass.setFocus
else
user.setFocus
Ce n'est pas assez bon car si l'utilisateur entre un nom d'utilisateur et un mot de passe, puis il souhaite modifier le nom d'utilisateur, il ne peut pas parce que l'accent sera mis sur le mot de passe.
Installez un Je suggère également de lier retour dans "Nom d'utilisateur" sur "Définir la mise au point sur le mot de passe" et retour dans le champ "Mot de passe" sur "Soumettre le formulaire". < / p> onclick gestionnaire sur le corps élément (ou un div couvrant la plupart de la page). En cliquant sur la div, vous devez ensuite définir la mise au point sur le champ Nom d'utilisateur / mot de passe.
On dirait que vous Voici le balisage: P> flou () code> Événements de sorte que si cela se produit, il passe à l'élément suivant. $(document).ready(function() {
// what are the named fields the user may focus on?
var allowed = ['username', 'password', 'submit'];
$.each(allowed, function(i, val) {
var next = (i + 1) % allowed.length;
$('input[name='+val+']').bind('blur', function(){
$('input[name='+allowed[next]+']').focus();
});
});
$('input[name='+allowed[0]+']').focus();
});
+1 pour le concept, mais l'exemple de JQuery pourrait être un peu moins complexe. - Code jQuery légèrement nettoyé chez jsfiddle.net/bkuuv/2
Aussi, nommer / réglage de l'ID d'un Soumettre peut causer des problèmes avec la fonction jQuery .Submit () fonction. dev.jquery.com/ticket/6264
Je ne définissons pas le ID de l'entrée pour soumettre, le ticket n'est pas pertinent. Mon exemple n'utilise pas le tout S du tout, je ne vois tout simplement pas comment ils sont nécessaires pour répondre à la question. J'aime votre utilisation de suivant () cependant. En outre, je n'utilise pas d'abord () beaucoup mais j'aime aussi ça aussi.
Oh - et j'ai résolu le problème Maj + Tab avec un petit Settimeout - jsfiddle.net/bkuuv/3 - N'hésitez pas à modifier dans mes exemples si vous souhaitez les utiliser ...
Le même bug surveille avec
Vous pouvez activer le clic sur les liens en vous concentrant sur vos entrées après un intervalle de temps minimum.
Chaque fois qu'un objet gagne le focus que vous vérifiez s'il possède la classe requise: sinon définissez la mise au point sur le premier des entrées de forme; de cette façon:
Ce n'est qu'une idée, vous pouvez utiliser une fonction seinterval pour mettre l'accent dans le champ Nom d'utilisateur et vous pouvez l'interrompre lorsque vous souhaitez une fonction ClearInterval.
$('#password').focus(function(){ clearInterval(A);});
Eugh. S'il vous plaît n'essayez pas de faire cela. Si les utilisateurs veulent que l'accent soit ailleurs, laissez-les l'avoir ailleurs.
Peut-être que ce comportement de mise au point très irritant est quelque chose que vous avez été invité à faire, alors vous avez peu de pouvoir à faire autrement, mais pense: est-ce que cela vaut vraiment la peine? Est-ce utile? Même nécessaire?
@Misha: Bienvenue dans la programmation d'une application Web!
Cela ruine également beaucoup de navigateurs à base de texte. Ne forcez pas l'accent, en général ne forcent rien avec l'interface utilisateur.
Je doute qu'il y ait beaucoup de navigateurs textuels autour desquels la manipulation des événements JavaScript.
Et si elles veulent cliquer sur le bouton de connexion? Ou même seulement onglet? Assez d'utilisateurs utilisent simplement leur clavier (avec une petite interaction de la souris) que cela serait insensé.
Assurez-vous simplement que tous les liens et les boutons de la page sont également inclus dans la liste des éléments de focus autorisés ou l'utilisateur ne pourra pas utiliser le clavier.