diff --git a/resources/js/app.js b/resources/js/app.js index 7842c31..1f8cc38 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -9,6 +9,7 @@ import pageScrollerInit from './pageScroller'; import observeChapterProgression from './chapter-progression'; import notificationsInit from './notifications.js'; import LightBoxSingle from './lightboxSingle'; +import handleForms from './forms'; // window.addEventListener('load', function () {}); window.addEventListener('DOMContentLoaded', (event) => { @@ -18,6 +19,7 @@ window.addEventListener('DOMContentLoaded', (event) => { editorInit(); accordeonInit(); taxonomyThematiqueFaqInit(); + handleForms(); // NEWS archiveNewsInit(); // PUBLICATIONS diff --git a/resources/js/forms.js b/resources/js/forms.js new file mode 100644 index 0000000..634618f --- /dev/null +++ b/resources/js/forms.js @@ -0,0 +1,88 @@ +/** + * handleForms + * + * Comportement clavier pour Gravity Forms (wrapper `.gform_wrapper`). + * - Intercepte `keydown` (en phase de capture) et bloque Enter partout, + * sauf sur: + * - `TEXTAREA` (nouvelle ligne autorisée) + * - Boutons de soumission (BUTTON[type=submit], INPUT[type=submit]) + * - Ajoute une garde au niveau de `submit` (en capture) afin de n'autoriser + * la soumission du formulaire que si le focus/le submitter est un bouton submit. + * + * Objectif + * - Éviter les soumissions implicites du formulaire via Enter (ex.: Enter sur + * un champ texte ou un SELECT fermé), tout en laissant fonctionner la + * soumission explicite via le bouton submit. + * + * Notes + * - Le code n’agit que si l’événement provient d’un élément à l’intérieur + * d’un formulaire Gravity Forms: `.gform_wrapper form`. + */ + +export default function handleForms() { + function shouldBlockEnter(e) { + if (e.key !== 'Enter') return false; + + const el = e.target; + if (!el) return false; + + const tag = el.tagName; + const type = (el.getAttribute && (el.getAttribute('type') || '')).toLowerCase(); + + // allow new line in textarea + if (tag === 'TEXTAREA') return false; + + // allow explicit submit controls + const isSubmitButton = + (tag === 'BUTTON' && (type || 'submit') === 'submit') || + (tag === 'INPUT' && type === 'submit'); + if (isSubmitButton) return false; + + // block Enter everywhere else to avoid implicit submit (inputs, selects, etc.) + return true; + } + + document.addEventListener( + 'keydown', + (e) => { + // only inside Gravity Forms + if (e.key !== 'Enter') return; + + const form = e.target && e.target.closest && e.target.closest('.gform_wrapper form'); + if (!form) return; + + if (shouldBlockEnter(e)) { + e.preventDefault(); + e.stopPropagation(); + } + }, + true + ); + + // Simple guard: only allow submit if focus/submitter is the submit button + document.addEventListener( + 'submit', + (e) => { + const form = e.target; + if (!form || !(form.closest && form.closest('.gform_wrapper'))) return; + + const submitter = e.submitter; + const active = document.activeElement; + + const isActiveSubmit = + active && + ((active.tagName === 'BUTTON' && + (active.getAttribute('type') || 'submit').toLowerCase() === 'submit') || + (active.tagName === 'INPUT' && + (active.getAttribute('type') || '').toLowerCase() === 'submit')); + + const isSubmitterFocused = submitter && active && submitter === active; + + if (!(isActiveSubmit || isSubmitterFocused)) { + e.preventDefault(); + e.stopPropagation(); + } + }, + true + ); +}