déclencher une function sur input text

**maxtrident** · 18/12/2023, 12h10

bonjour
mon input type text permet entrer un code promo.
je voudrais déclenché ma function une fois le code indiqué.
mais si je met du change ça fonctionne que si on clique à l’extérieur de imput ...la on peut valider le bouton submit sans que la fonction a déclenché.
si je met du click et du mousemove sans mettre de condition: ça fonctionne mais la fonction se déclenche en permanence.
avec une condition ça fonctionne bien 1 fois mais si on change de code car le cursor de l'input est resté et donc pas recliqué = fonctionne plus.
une idée comment faire ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

  <td colspan="2" class="pani-PTotal"><input class="pani-code" name="codereduc" onkeypress="refuserToucheEntree(event);" maxlength="50" pattern="^[A-Za-z0-9]+$" id="code_reduc" type="text" value="<?php if (isset($_POST['codereduc'])){ echo $_POST['codereduc'];} ?>"/></td>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
  if( rescode = document.getElementById('code_reduc')){
	document.getElementById('code_reduc').addEventListener('click', function(){  
	let stopevent = 0;
   document.getElementById('paniertable').addEventListener('mousemove', function(){
	   if (stopevent == 1){
   calcul(0,0);	
	   }
stopevent++;
});
});}

**unanonyme** · 18/12/2023, 12h58

Bonjour,

Votre code devrait probablement
s'abonner à l'évènement keypress
avec une stratégie d'anti-rebond.

A chaque touche pressée,
un timeout est définit,
le précédent est annulé.

https://developer.mozilla.org/fr/doc...keypress_event
https://developer.mozilla.org/fr/doc..._des_minuteurs

Bonne journée.

**maxtrident** · 18/12/2023, 13h38

bonjour
merci, mais je n'utilise pas les touches... j'ai même bloqué le entrer.
il me faudrait quelque chose qui m'enlève le cursor (ou le sélecteur) de input après que la fonction est déclenché ou alors avec le mouvement de la souris

**SpaceFrog** · 18/12/2023, 14h35

Qu'est ce qui détermine le fait que le code de promo est fini d'être tapé ?

sa longueur ? => verification sur le onchange

**unanonyme** · 18/12/2023, 15h46

Envoyé par maxtrident

merci, mais je n'utilise pas les touches...

Bonjour,

si vous faites de la télépathie homme-machine, je veux bien apprendre, ça m'intéresse.

Plus sérieusement, je ne comprends pas.

Pour le reste de votre message, Il me semble que la méthode blur pourrait vous aider.

Bonne journée.

**maxtrident** · 18/12/2023, 16h13

Qu'est ce qui détermine le fait que le code de promo est fini d'être tapé ?
le fait de bouger la souris ou cliquer normalement.

je pense que je voir avec click(); quand on commence a bouger la souris = clic avec un onchange qui déclenche la fonction.

enfaite je veut faire ça car la function indique sur une div avec json la description du code et le montant qui va être déduit et calcul le total

**SpaceFrog** · 18/12/2023, 16h17

Donc quand le user ouvre la page et bouge la souris ça doit vaider ?

**maxtrident** · 18/12/2023, 16h19

non car il faut cliqué avant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('code_reduc').addEventListener('click', function(){

il y a une fonction simple pour savoir la position du curseur de la souris pour faire un click quand on bouge ?

**SpaceFrog** · 18/12/2023, 16h29

En gros le user entre son code
...
et lorsqu'il quitte l'input ça doit valider ...

onblur

**maxtrident** · 18/12/2023, 16h57

onblur, pareille que le onchange si il ne clique pas autre part ça ne fonctionnera pas.
mon bouton pour valider le formulaire et un peut bas...si le user écrit un code ensuite bouge la souris sans cliquer et clic ensuite directement sur le bouton valider = pas de fonction

edit: en faisant ça c'est bon mais c'est pas jojo

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
  if( rescode = document.getElementById('code_reduc')){
	document.getElementById('code_reduc').addEventListener('click', function(){  
	setTimeout(() => {
  	let stopevent = 0;
   document.getElementById('paniertable').addEventListener('mousemove', function(){
	   if (stopevent == 1){
	   document.getElementById("code_reduc").blur();
	   }
stopevent++;
});
}, "2000");
});
}
 
document.getElementById('code_reduc').addEventListener('change', function(){ 
calcul(0,0);	
});

**NoSmoking** · 18/12/2023, 18h44

Bonjour,

mon input type text permet entrer un code promo.
je voudrais déclenché ma function une fois le code indiqué.

pour moi il existe une façon de faire et pas trente-six

[IHM] SAISIE du code
[IHM] VALIDATION code lorsque je suis satisfait de ma saisie
[PROG] TEST validité du code
[PROG] APPEL fonction qui va bien
[PROG] ... suite à donner ... affichage/traitement

Merci de me laisser le droit de me tromper, de bouger ma souris pour la virer de l'écran et qui plus est de cliquer dessus lors du déplacement, pas fait attention elle est hyper sensible, et de ne pas m’embrouiller avec je ne sais quel artifice nait de l’inspiration du moment

Au passage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if( rescode = document.getElementById('code_reduc'))

c'est une affectation, pas une comparaison !

**unanonyme** · 18/12/2023, 20h14

Bonjour,

vous essayez, vous regardez.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<script>
        document.addEventListener("DOMContentLoaded", (event) => {
                let canSubmit = false;
                let i = document.querySelector("[name='codereduc']");
                const done = (ev)=>{
                        console.log("input=" + ev.target.value);
                        canSubmit = !!ev.target.value;
                }
                let tout;
                i.addEventListener("keydown", (ev)=>{
                        tout && clearTimeout(tout);
                        tout=setTimeout(()=>{done(ev)}, 500);
                });
                i.addEventListener("change", console.log);
                let f = document.querySelector("form");
                f.addEventListener("submit", (ev)=>{
                        (!canSubmit) && ev.preventDefault();
                }, true);
        });
        </script>
</head>
<body>
	<form>
		<input  name="codereduc"  />
		<button type="submit">send</button>
	</form>
</body>
</html>