89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
/**
|
||
* 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
|
||
);
|
||
}
|