J'ai des boîtes de texte sur une page et je souhaite cliquer sur un lien lorsque l'utilisateur appuie sur l'une d'entre elles.
Je peux facilement piéger le bouton Entrée à l'aide de JavaScript (en recherchant 13 dans Je sais qu'il serait préférable d'utiliser un formulaire et un bouton d'envoi ici, mais pour diverses raisons qui ne sont pas pratiques.
J'utilise JQuery, alors n'hésitez pas à offrir des solutions JQuery. event.keycode et event.qui ), mais je frappe un problème lorsque l'autoocomplète du navigateur La fonctionnalité commence et suggère ce que l'utilisateur voudra peut-être taper. Nous trouvons que les utilisateurs appuyez-vous souvent sur Entrée pour accepter la suggestion du navigateur, plutôt que l'onglet. Cela confond les utilisateurs car le lien est cliqué immédiatement, alors qu'ils ont toujours l'intention d'entrer du texte dans certains des autres champs.
10 Réponses :
Essayez de définir l'autocomplete Désactivé dans votre case à cocher, bien que ce ne soit pas standard pour tous les navigateurs, mais cela fonctionne sur les navigateurs communs.
<input type="text" autocomplete="off" />
Ce serait une honte de perdre complètement la fonction autocomplete.
Je ne sais pas si vous passez des appuis sur la touche sur la fenêtre ou sur des éléments DOM spécifiques. Vous devriez faire ce dernier (par exemple sur l'élément ), puis dans votre gestionnaire d'événements, examinez l'objet d'événement pour déterminer quel élément DOM était à l'origine de l'événement. Si c'était un champ de texte avec autocomplete, alors Jetez un coup d'œil à JQuery's retourne faux; .
.KeyPress () Handler des événements et Event.Target propriété de l'objet événement.
Après avoir trouvé l'entrée de texte qui a été mise au point lorsque l'utilisateur a appuyé sur Entrée, comment puis-je déterminer si l'autocomplete de navigateur était ou non utilisé à l'époque?
Je suppose que ce n'est pas une option pour vous de traiter les champs de texte pertinents pour le traitement automatique, car ne pas être pertinents pour soumettre le formulaire? Sinon, vous pouvez également combiner cette approche avec la suggestion de @ TUANVT de piéger l'ordre des touches, de déterminer lorsqu'une flèche «basse» (éventuellement suivie d'une flèche «Up») a été enfoncée.
Quoi qu'il en soit, cibler la forme et non la fenêtre serait une bonne idée, car cela réduit les risques de conflits dans le développement ultérieur.
Bonjour, quiconque a voté cette suggestion. Soin de partager pourquoi vous l'avez trouvé inutile?
J'ai voté. Je souhaite savoir comment détecter si l'utilisateur se trouve dans la suggestion de navigateur du navigateur au point où ils appuient Entrée: votre réponse ne me donne aucune aide sur la façon de faire cela. Votre réponse me dit comment trouver l'élément de l'utilisateur lorsqu'il appuie sur Entrée, explique: «S'il s'agissait d'un champ de texte avec autocomplete ...», mais ne me dis pas comment trouver cette information, qui est ce que ma question concerne tout.
Ok, merci de répondre. Je supposais que vous saviez que vous saviez lequel de vos champs de formulaire était mûr pour l'auto-répartition. Cool cool.
L'utilisateur doit toujours appuyer sur la touche BAS si elles choisissent de sélectionner l'un des droits de texte complète automatiques, pourquoi ne pas définir une variable sur quelque chose lorsqu'ils appuient la touche BAS, puis si elles font l'entrée, appuyez sur la touche Enfer. variable. Vous ne devriez pas faire la fonction de liaison clic si la variable est définie, sinon le faites comme normal.
WOW - C'est jolie Heath Robinson, mais j'aime ça! Je suppose que je devrai suivre d'autres frappes de frappe (haut / bas / page vers le haut / page en bas, car ils naviguer dans la liste; n'importe quoi d'autre pour revenir à la typage) et définir / réinitialiser le drapeau de manière appropriée. Je ressens une extension de jQuery à venir ...
Faites-moi savoir quand le plugin sort s'il vous plaît, cela ressemble à beaucoup de suivi de la presse clé à faire: D, GUD Luck
C'est une bonne idée. N'oubliez pas que l'utilisateur peut appuyer sur la touche "Up" entre les touches "Down" et "Entrée".
@Tuanvt - Ce n'était pas trop mauvais, comme il s'avère! J'ai mis le code dans une autre réponse à cette question, mais je laisserai le vôtre comme l'accepté comme vous l'avez fait le travail acharné. J'espère que vous le trouverez utile!
Cela suppose que l'utilisateur sélectionne une option Automplète avec un clavier et non, par exemple une souris.
Oui, mais l'utilisateur ne appuiera pas l'intro lorsque vous sélectionnez avec la souris, non?
Utilisation de l'idée de TUANVT dans la réponse acceptée, j'ai écrit un plugin JQuery qui fait le travail.
i Suivez lorsque l'utilisateur appuie sur les touches UP, DOWN, PAGE-UP et PAGE-DOWN pour indiquer quand ils sont la boîte autocomplete. Toutes les autres clés impliquent qu'ils l'ont laissé.
Je m'assurs que nous n'appliquons que ces règles sur textboxes: tous les autres éléments d'entrée se comportent normalement.
Opera fait déjà un très bon travail de Ce que j'essayais de réaliser, donc je n'applique pas mes règles dans ce navigateur - sinon l'utilisateur devrait appuyer deux fois sur Entrée.
Testé dans IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00.
Il est disponible sur jquery.com comme le Plugin SafeTer . Pour votre commodité, le code de version 1.0 est comme suit:
Vous ne pouvez plus obtenir ce plugin à partir de JQuery en raison du changement du nouveau site du plug-in, mais j'ai remarqué que vous aviez mis V1.0.1 dessus (même si nous pouvons y accéder) quels étaient les changements pour cela et pourriez-vous le poster? :) Merci
Pour que quiconque essaie de faire fonctionner cela avec la nouvelle version de jQuery (1.9+, je pense que c'est) le .browser comme parti mais je ne peux voir aucun autocomplete sur l'opéra de toute façon, supprimez simplement le dernier chèque de cette ligne: si (! $ (this) .data ('SafeEner_AUTOCOMPTOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPETE') || !.is (entrée [TYPE = TEXT] ') || $ .Browser.opera) Alors il se lit comme suit: Si (! $ (Ceci). Données ('SafeEner_AUTOCOMPOMPTOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPOMPEL) ||! (Ceci) .is (' entrée [type = texte] '))
Track Down Enter Touche sur l'événement de Keyup, la sélection est terminée au moment où vous détectez la touche Entrée de l'événement de Keyup.
Détection de la touche Entrée sur la touche et la fonctionnement interfère avec la fonctionnalité de l'auto-compplète.
Si vous utilisez les nouveaux types de champs de formulaire HTML5, vous souhaiterez peut-être modifier le code de Teedyay comme suit: notez les nouveaux types d'entrée.
jQuery est sympa et tout sauf pourquoi ne pas utiliser de simplicité JavaScript?
Cela fonctionne pour moi:
$('input').keypress(function(e) {
if(e.which == 13) {
if(this.value)
{
$("#submitbutton").click();
}
}
});
J'ai fait face au même problème et sans parfum, j'ai utilisé une autre approche que je considère plus simple. Lors de la création de l'autocomplete, j'ai défini l'heure actuelle de l'événement SELECT, puis comparez-la avant de prendre toutes les actions:
p>
<html> <head> <link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script> </head> <body> <input id=completer type=text /> </body> </html>
Une autre approche (plus sûre) consiste à Utiliser le autocomplete définit la valeur < Strong> après le Vous voudrez peut-être vérifier si KeyUp et CLULEDOWN Événements pour détecter les modifications de valeur. Métte . Lorsque les deux événements sont observés, ce qui suit est beaucoup plus fiable que les autres solutions: