Attacher un Evènement dans une Class

Version imprimable

Bonjour à tous,

j'essaye de développer une class permettant le limiter la saisie à la volet... mais cette dernière ne marche pas du tout à cause du passage des paramètres de la fonction.

J'ai essayé une méthode donner dans les autres réponses mais sans succès.

Voici mon code

Code:

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>MaxLength (class)</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
 
<style type="text/css">
<!--
 
-->
</style>
 
 
 
<script type="text/javascript">
<!--
 
 
window.onload = windowLoad;
 
function windowLoad() {
	v_input01 = new ClassMaxLength('textarea01', 200);
	v_input02 = new ClassMaxLength('textarea02', 50);
}
 
 
 
function ClassMaxLength(v_id, v_max) {
	this.id = v_id;
	this.maxlength = v_max;
 
	this._keypress(this.id, this.maxlength);
	this.prepare();
}
 
ClassMaxLength.prototype = {
	prepare : function() {
		var v_id = document.getElementById(this.id);
 
		if(v_id.attachEvent) {		
			v_id.attachEvent('onkeydown', this._keypress);
			v_id.attachEvent('onkeyup', this._keypress);
		} else {
/* 1ier essai
			v_id.addEventListener('keydown', this._keypress, false);
			v_id.addEventListener('keyup', this._keypress, false);
*/
/* 2nd essai */
			v_id.addEventListener('keydown', function() { ClassMaxLength.prototype._keypress(this.id, this.maxlength); }, false);
			v_id.addEventListener('keyup', function() { ClassMaxLength.prototype._keypress(this.id, this.maxlength); }, false);
		}
	},
/* 1ier essai
	_keypress : function() {
		/* Ne marche pas car la variable THIS est perdue... *
 
		var v_max = this.maxlength;
		var v_id = document.getElementById(this.id);
		var v_id_ = document.getElementById(this.id + '_');
 
		if (v_id.value.length > v_max) {
			v_id.value = v_id.value.substring(0, v_max);
		} else {
			v_id_.innerHTML = v_max - v_id.value.length;
		}
	}
*/
/* 2nd essai */
	_keypress : function(v_id, v_max) {
//		alert(v_id + ' ' + v_max);
 
		var v_docId = document.getElementById(v_id);
		var v_docId_ = document.getElementById(v_id + '_');
 
		if (v_docId.value.length > v_max) {
			v_docId.value = v_docId.value.substring(0, v_max);
		} else {
			v_docId_.innerHTML = v_max - v_docId.value.length;
		}
	}
 
}
 
 
 
 
-->
</script>
 
 
</head>
 
<body>
<div>
 
	<h1>MaxLength (class)</h1>
 
	<p>Il vous reste <span id="textarea01_">X</span> caract&egrave;res.</p>
	<p><textarea name="textarea01" id="textarea01" cols="50" rows="10">Bonjour !</textarea></p>
 
	<hr />
 
	<p>Il vous reste <span id="textarea02_">X</span> caract&egrave;res.</p>
	<p><input name="textarea02" id="textarea02" value="" /></p>
 
</div>
 
</body>
 
</html>

Merci pour votre aider :D

bonjour,

Et en organisant ton code de cette manière ? Les méthodes de l'objet sont incluses dans la déclaration de l'objet : j'évite la syntaxe objet.prototype.

Code:

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function monObjet(id)
{
 this.id = id;
 this.param = null;
 
 this.methode1 = function()
 {
  alert("coucou 1");
 }
 this.methode2 = function(param)
 {
  alert("coucou 2 "+param);
  this.param = param;
 }
 this.methode3 = function()
 {
  alert("coucou 3 "+this.param+" "+this.id);
 }
  this.methode4 = function(param)
 {
  this.methode2(param);
  this.methode3();
 }
 
}
 
function init()
{
 var obj = new monObjet(1234);
 obj.methode1();
 obj.methode2("salut");
 obj.methode3();
 obj.methode4("hello");
 
}
//-->
</script>
 
</head>
 
<body onload="init()">
&nbsp;
 
</body>
 
</html>

09/10/2006, 13h23
mr32

Merci beaucoup pour ta réponse, j'ai adapté ton code mais ça ne marche toujours pas.

Le problème doit surement venir de la perte des paramètres "this" lors de l'appel de la fonction au moment de l'évènement...

je me demande même si ce comportement peut avoir une solution, car cela semble provenir du noyau Js même :(
09/10/2006, 13h43
mr32

j'ai trouvé la solution, il faut passer l'évènement par une variable et non pas this.xxx

et là tout va bien ;)

Merci pour tout !
09/10/2006, 13h45
Bisûnûrs

Citation:

Envoyé par mr32

limiter la saisie à la volée

Tu entends quoi par "limiter" ? Interdire certaines touches/saisies oulimiter le nombre de caractères dans tes textarea ?
09/10/2006, 20h14
mr32

en gros, j'ai voulu refaire un maxlength mais qui indique le nombre de caractères restant... tout ça en class bien sur ;)