Comment empêcher la soumission d'un formulaire avec Entrée dans Webflow ?
Apprenez à empêcher la soumission accidentelle d'un formulaire Webflow avec la touche Entrée.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment empêcher la soumission accidentelle d'un formulaire Webflow avec la touche Entrée.
Exemple
Appuyez sur Entrée dans les champs : rien ne se passe. Le textarea accepte Entrée normalement.
Essayez Entrée dans les inputs du dessus
| Cas d'usage | Problème | Solution |
|---|---|---|
| Formulaire multi-champs | Entrée sur le 1er champ soumet tout | Bloquer Entrée sur les inputs texte |
| Formulaire avec recherche | Entrée lance une recherche non voulue | Gérer Entrée manuellement |
| Formulaire multi-steps | Entrée saute des étapes | Bloquer et gérer la progression |
Le script
document.querySelectorAll('form').forEach(function(form) {
form.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
e.preventDefault();
}
});
});Variante : autoriser Entrée uniquement sur le dernier champ
Pour autoriser la soumission avec Entrée uniquement depuis le dernier input du formulaire :
document.querySelectorAll('form').forEach(function(form) {
var inputs = form.querySelectorAll('input, select');
var last = inputs[inputs.length - 1];
form.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && e.target !== last && e.target.tagName !== 'TEXTAREA') {
e.preventDefault();
}
});
});Conclusion
Ce snippet évite les soumissions accidentelles sur les formulaires complexes. Voir aussi : concevoir des formulaires sans friction.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
