Détecter quand un input change de valeur par programmation

**Lapinpanda** · 17/09/2010, 16h38

Bonjour,

j'ai cherché mais point trouvé, comment faire récupérer l'évenement quand un input change de valeur.

Pour ma part je pensais que ceci fonctionnait :

Code :

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

1
2
3
4
5
 
$("input").change(function() {
  alert('Handler for .change() called.');
//ici le code que je voudrai executer
 });

Mais non. Une raison peux être, c'est que c'est un code javascript(dont je n'ai pas la main) qui modifie la valeur de cet input.

Ma question donc, comment faire pour lancer mon code une fois que ce script modifie la valeur de l'input?

merci

**Edgar** · 17/09/2010, 18h16

Si j'ai bien saisi

Code :

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

1
2
3
4
function quinapalamain()
{
$('#selecteurDeLinput').change();
}

[Edit]
j'ai peut être pas répondu exactement à ta question ,

si c'est un code javascript dont tu n'as pas la main , donc sur la conception ,je suggérerais l'utilisation d'un timer qui régulièrement scrute le contenu de ton input

**danielhagnoul** · 19/09/2010, 21h23

Bonsoir

Vous avez raison, car l'événement change est seulement déclenché lorsque l'utilisateur modifie le contenu d'un input.

On peut résoudre le problème en demandant au code existant qu'il envoie l'événement change après avoir modifié un input, simplement en lui ajoutant -- .trigger("change"); -- voir le code du bouton "Changer".

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* dvjh */
		h1 {
			text-align:center;
			font-style:italic;
			text-shadow: 4px 4px 4px #bbbbbb;
		}
		h2 {
			text-align:center;
		}
		div#conteneur {
			width:95%;
			height:auto;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script>
		$(function(){
			$("input").each(function(i, item){
				$("#affiche").append("<p>input[" + i + "] = " + $(item).val() + "</p>");
			});
 
			$("input[type='text']").change(function(event){
				$("#affiche").append("<p>$(this).val() = " + $(this).val() + "</p>");
			});
 
			$("#btn").click(function(){
				$("input[type='text']").val("pourquoi pas").trigger("change");
			});
		});
	</script>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
		<button id="btn">Changer</button>
		<input type="text" value="oui"/>
		<input type="text" value="non"/>
		<input type="text" value="peut-être"/>
		<input type="text" value="sans doute"/>
		<div id="affiche"></div>
	</div>
</body>  
</html>

**Lapinpanda** · 20/09/2010, 08h57

trés intéressant merci

je vais essayer

**Lapinpanda** · 20/09/2010, 16h07

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
//when input .change raise do this
$("input").change(function(){
 PreFilledValue();
 });
 
//override default behavior
$("input").parent().children("img").click(function(){
$(this).parent().children("select").dblclick(function(){
$("input").trigger("change");
});
});