11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous
Je galère depuis quelques heures sur le problème suivant :
J'ai des balises <input> sur lesquelles j'aimerais bien appeler une fonction quand on a modifié le contenu.
l'évènement "input" est appelé à chaque entrée de caractère, ce qui me semble beaucoup, car on ne sait pas si la modification est terminée ou non
les autres évènements (change, blur) ne sont pas systématiquement déclenchés quand on a fini une modification.
Quelle est la bonne technique (ou la moins mauvaise) ?
Merci de votre aide
PapyJP a écrit :
Les autres évènements (change, blur) ne sont pas systématiquement déclenchés quand on a fini une modification.

Bonjour. Qu'entends-tu par là ? Qu'il faudrait éviter à l'input de devoir attendre de perdre le focus ?

Tu utilises bien `.addEventListener()` plutôt que la notation par point (`.onblur`, `onchange`, ...) ? Dans certains cas c'est important pour éviter les conflits entre événements (la notation par point écrase les autres événements).

Modifié par Olivier C (30 Mar 2024 - 11:27)
Merci de ta réponse.
Oui, j'utilise bien .addEventListener, il doit y avoir très peu d'endroit dans mon code où on trouve des on...="..."
Le problème:
Si j'ai une balise <input type="text"> et que l'on entre du texte dedans, l’évènement input appelle ma fonction à chaque caractère entré.
Pourquoi pas, mais compte tenu de ce que je veux faire ça ne m'intéresse pas vraiment.

Ce que je veux c'est détecter quand l'input perd le focus, c'est à dire que la totalité du texte a été entrée.
Je pensais que l’évènement blur correspond à ce que je cherche à faire, et je suis surpris que ce ne soit pas systématiquement le cas, c'est à dire que j'ai constaté qu'on passe d'un <input> à autre chose sans que cet évènement soit déclenché.

Il est possible que mon code soit mal écrit, auquel cas je vais rechercher l'erreur (ou les erreurs vraisemblablement) mais je voudrais être sûr que blur soit le bon évènement, ou quel autre évènement il faut utiliser pour obtenir ce que je veux faire, c'est à dire simplement vérifier le contenu de mon <input>.
Administrateur
Bonjour,

(1ère idée de semi-noob) Est-ce que focusout fonctionnerait mieux ?

En cherchant de la doc sur focusout vs blur...
Est-ce que l'évènement blur est bien attaché sur l'input et pas un parent ?
Si j'en crois https://javascript.info/focus-blur c'est la différence avec focusout.
Merci Felipe
blur est bien attaché à <input> et pas à son parent
Il doit donc y avoir une erreur quelque part dans mon code.
Je vais également tester avec focusout

edit: je vois que dans la page que tu m'as indiquée on a
It works in all browsers except Firefox (bug).

ça explique tout (au moins en apparence)

Modifié par PapyJP (30 Mar 2024 - 15:06)
Apparemment ça fonctionne, je ne sais pas pourquoi j'avais des problèmes hier.
Modifié par PapyJP (30 Mar 2024 - 18:44)