Le déplacement d'un focus lorsque le champ de texte de saisie atteint une longueur max
J'ai un numéro de carte de crédit formulaire. Le nombre est divisé en quatre parties comme sur une vraie carte de crédit.
Je veux ajouter un JavaScript goût pour la forme, où, quand un utilisateur tape quatre lettres dans un champ, le focus passe automatiquement à la prochaine balise. Mais pas dans la dernière balise. En faisant cela, un utilisateur de ne pas avoir à taper la touche de tabulation pour déplacer l'accent.
Il est d'accord pour ajouter un peu de classe supplémentaire, l'id ou le nom dans les balises.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>MoveFocus</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
//some code goes here.
});
</script>
</head>
<body>
<form action="post.php" method="post" accept-charset="utf-8">
<input type="text" value="" id="first" size="4" maxlength="4"/> -
<input type="text" value="" id="second" size="4" maxlength="4"/> -
<input type="text" value="" id="third" size="4" maxlength="4"/> -
<input type="text" value="" id="fourth" size="4" maxlength="4"/>
<p><input type="submit" value="Send Credit Card"></p>
</form>
</body>
</html>
- ... bien sûr, certains utilisateurs de va appuyez sur la touche tab, et miss champs out. Ne pas diviser le terrain en place, il suffit d'utiliser un seul champ. Cela rend les choses beaucoup plus facile pour les utilisateurs (et c'est ce que tous les autres sites web, il n').
- Non pas que je suis à chaque utilisateur, mais je déteste les sites qui font cela avec téléphone, CC et SS numéros. Je préfère de beaucoup de sites qui interprètent la prochaine pression de touche comme aller à la zone suivante et en la tapant. Dans votre cas, attendez que le cinquième de pression de touche, si c'est un nombre, déplacer le focus à la zone suivante et définissez le premier caractère du numéro choisi. Si c'est une touche de flèche droite, passer à la zone suivante et de ne pas définir d'caractères. Juste mon avis sur la facilité d'utilisation.
- Oh, et si l'utilisateur fait une erreur dans le dernier caractère dans toute la boîte, ils veulent probablement leur touche de retour arrière pour continuer à fonctionner.
- Il doit y avoir une Coalition Contre la mise au point Automatique et la Tabulation.. certains de ces UI sont TROP intelligents et obtenir de la manière de l'utilisation normale
Vous devez vous connecter pour publier un commentaire.
Je n'ai pas utilisé cet outil avant, mais il fait ce que vous voulez. Vous pouvez simplement regarder, il est la source pour obtenir quelques idées:
Ce Plugin sur GitHub
Pour votre situation, vous devez ajouter ce code:
keydown()
,keypress()
etkeyup()
, ce qui semble être une meilleure solution.Comme d'autres l'ont instamment prié de ne pas le faire. Les utilisateurs ne vont pas être en mesure d'anticiper que vous aurez l'auto-onglet d'eux, et il va conduire les noix. Avez-vous pensé aux utilisateurs qui copiez et collez leur carte de crédit? Quel est l'avantage de l'utilisation de quatre champs de toute façon?
Aussi, pas toutes les cartes de crédit de diviser leur nombre en quatre groupes de quatre. American Express les divise en trois groupes de nombres, par exemple. Dynamiquement ajout et suppression de champs de texte est d'avoir des ennuis dans ce cas.
Au lieu de cela, utilisez votre code Javascript à insérer automatiquement les espaces où ils appartiennent, faire avancer le curseur, pas le focus. Le premier chiffre du numéro indique le type de carte de crédit (5 est de Mastercard, de 4 est du Visa, 3, American Express...), de sorte que vous pouvez lire ceci à décider où ajouter les espaces. Frotter les espaces de la chaîne lorsque vous le poster. Cette approche permettra d'économiser que vous et vos utilisateurs beaucoup de douleur.
Comme @Sander a suggéré, la manière facile de faire une auto-onglet:
Mise à jour par @morespace54
oninput
est un html5 événement est pris en charge sur IE9+, de sorte que vous pouvez utiliserkeyup
à la place.jQuery("form input[type=text]").on('keyup',function () { if(jQuery(this).val().length == jQuery(this).attr('maxlength')) { jQuery(this).next("input").focus(); } });
oninput
est IE9+, c'est pourquoi il ne fonctionne pas dans IE8 je vais mettre à jour la solution. Merci 😉Je recommande fortement d'utiliser le Masked Entrée plugin jQuery. http://digitalbush.com/projects/masked-input-plugin/
Votre utilisation ressemblera à ceci:
De cette façon, vous devrez copier-coller".
Si vos champs de formulaire sont l'un à côté de l'autre comme dans votre exemple, vous pouvez simplement profiter de
nextElementSibling
et voilà!!JS:
HTML:
Une solution très simple pourrait aller comme ceci:
Je ne l'ai pas testé, mais je pense que cela va fonctionner. Il sera probablement aussi déplacer le focus sur le bouton lorsque le 4ème champ est rempli.
Ce n'est pas quatre domaines, mais il n'valider les cartes de crédit (vérification de l'intégrité, de ne pas l'Algorithme de Luhn!). Je dois vous dire combien il est ennuyeux d'utiliser plusieurs champs pour un utilisateur et de l'auto-tabulation. Je vous recommande d'utiliser uniquement un champ.
De jquery site web:
/