FEATURE Blocking enter to avoid mistaken form submission
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
7e9b794d33
commit
b9f236c521
|
|
@ -9,6 +9,7 @@ import pageScrollerInit from './pageScroller';
|
||||||
import observeChapterProgression from './chapter-progression';
|
import observeChapterProgression from './chapter-progression';
|
||||||
import notificationsInit from './notifications.js';
|
import notificationsInit from './notifications.js';
|
||||||
import LightBoxSingle from './lightboxSingle';
|
import LightBoxSingle from './lightboxSingle';
|
||||||
|
import handleForms from './forms';
|
||||||
// window.addEventListener('load', function () {});
|
// window.addEventListener('load', function () {});
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', (event) => {
|
window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
|
|
@ -18,6 +19,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
editorInit();
|
editorInit();
|
||||||
accordeonInit();
|
accordeonInit();
|
||||||
taxonomyThematiqueFaqInit();
|
taxonomyThematiqueFaqInit();
|
||||||
|
handleForms();
|
||||||
// NEWS
|
// NEWS
|
||||||
archiveNewsInit();
|
archiveNewsInit();
|
||||||
// PUBLICATIONS
|
// PUBLICATIONS
|
||||||
|
|
|
||||||
88
resources/js/forms.js
Normal file
88
resources/js/forms.js
Normal file
|
|
@ -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
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user