Détection JavaScript du contexte de frappe au clavier (sélection de l'historique du formulaire ou envoi du formulaire)

Question

J'écris un plugin de formulaire semi-générique en utilisant jQuery afin d'accélérer le développement du projet sur lequel je travaille.

Selon nos prévisions, un modèle jTemplates contient les champs. Mon plugin examine le modèle pour en trouver requiert des ressources multilingues, les demande au serveur, puis les regroupe dans un objet JavaScript, qui est ensuite transmis à une fonction personnalisée lors de l’envoi du message "submit".

Tout fonctionne bien, à l'exception de la norme "et lorsque vous appuyez sur Entrée, soumettez le formulaire". code que vous devez faire lorsque vous simulez un formulaire:

opts.coreElement.find('input[type=text]').keypress(function(evt) {
    if ((evt.keyCode || evt.which) == 13) {
        opts.coreElement.find('.saveButton').click();
    }
});

Le problème est que dans Firefox (du moins; je n'ai pas encore vérifié les autres navigateurs), si vous avez déjà entré des informations dans une zone de texte portant le même nom, vous obtenez l'historique de vos formulaires. Si vous sélectionnez ensuite l'une de ces valeurs suggérées en appuyant sur Entrée, le formulaire est envoyé. Pas génial si vous êtes sur la première entrée de la page. Vraiment plutôt ennuyeux, en fait.

La solution évidente semble être d'insérer un élément de formulaire autour des champs et d'empêcher toute soumission éventuelle de ce formulaire factice via jQuery. Heureusement, j'ai le luxe de le faire car je suis dans ASP.NET MVC, mais si je ne l'étais pas? Et si mon plugin ne savait pas s'il était déjà dans un formulaire et devait donc se garder lui-même? Et si j'étais dans WebForms standard ASP.NET et moi devais activer manuellement " cibler " la touche de retour de chaque entrée sur le bon bouton d'envoi?

Existe-t-il un moyen, peut-être par le biais de l'objet événement lui-même, de détecter le contexte de la frappe, afin de pouvoir filtrer la sélection d'éléments d'historique de formulaire?

Answer 1

Définissez l'attribut autocomplete dans vos champs de texte sur désactivé :

opts.coreElement.find('input[type=text]').each(function() {
     $(this).attr('autocomplete', 'off');
});

Cela fonctionne pour tous les principaux navigateurs (Safari, Firefox, IE).

Answer 2

J'ai constaté que, pour empêcher l'action par défaut d'un événement de touche [entrée] ou [de tabulation], vous devez écouter l'événement de frappe et le gérer / l'annuler.
Au moment de l'activation de la touche ou de l'appui sur la touche, la valeur par défaut de la touche enfoncée est déjà passée.

Answer 3

La réponse de wulong fonctionne mais elle ne répond pas complètement à la question. La solution proposée consiste à désactiver l'historique du champ de saisie. Mais y a-t-il moyen de savoir si l’événement de pression de touche provient du texte saisi ou de l’historique?