Discussion :

[nosferapti]

Bonjour,

Je cherche à détecter toutes les modifications faites dans une zone de texte.
J'arrive déjà à détecter les modifications faites avec le clavier (ajouts de caractères, coller avec "Ctrl - v", etc.) mais je n'arrive pas à détecter celles faites avec la souris (coller avec le menu contextuel ou avec la molette sous Linux)

Avec "onmouseup", "onclick" et "onchange" j'arrive à détecter les modifications mais en retard alors que j'aimerai que la détection se fasse immédiatement après que la modification se produise.

Voilà un exemple de test, est ce que quelqu'un sait ce que je pourrais rajouter ?

Code XHTML :

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
    <script type="text/JavaScript">
        function a(zonedetexte) 
        {
            zonedetexte.rows = Math.max(2, zonedetexte.value.split("\n").length);
        }
    </script>
 
    <form action="aaa" method="post">
        <div>
            <textarea cols="100" rows="2" name="dd" id="dd"
                onkeyup="a(this);"
                onmouseup="a(this);"
                onclick="a(this);"
                onchange="a(this);"
                ></textarea>
        </div>
    </form>

[Bovino]

Salut,
Tu peux tester avec l'événement onpaste qui commence à être assez largement supporté.

[nosferapti]

Salut,
Tu peux tester avec l'événement onpaste qui commence à être assez largement supporté.

je viens de tester ça avec Firefox 3.0.6 et le "onpaste" ne produit aucun changement

Code XHTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <script type="text/JavaScript">
        function a(zonedetexte) 
        {
            zonedetexte.rows = Math.max(2, zonedetexte.value.split('\n').length);
        }
    </script>
 
    <form action="aaa" method="post">
        <div>
            <textarea cols="100" rows="2" name="dd" id="dd"
                onkeyup="a(this);"
                onpaste="a(this);"
                ></textarea>
        </div>
    </form>

[Bovino]

Ah... en revanche, ça fonctionne avec FF 3.5

[nosferapti]

je viens de tester avec le code jQuery trouvé là :
http://docs.jquery.com/Events/mousedown

la démonstration fonctionne très bien mais une fois appliqué à une zone de texte l'évènement "bouton de souris relâché" n'est pas lancé. c'est peut-être la navigateur qui empêche le passage par JavaScript

[Bovino]

je viens de tester ça avec Firefox 3.0.6 et le "onpaste" ne produit aucun changement

Très étonnant en fait, car onpaste est apparu pour Mozilla dans FF3 : https://developer.mozilla.org/En/DOM/Element.onpaste

[nosferapti]

Très étonnant en fait, car onpaste est apparu pour Mozilla dans FF3 : https://developer.mozilla.org/En/DOM/Element.onpaste

je viens de refaire l'essai avec "addEventListener" et il ne veut définitivement rien savoir

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
	<script type="text/JavaScript">
		function a(zonedetexte) 
		{
			zonedetexte.rows = Math.max(2, zonedetexte.value.split('\n').length);
		}
	</script>
 
 
	<form action="aaa" method="post">
		<div>
			<textarea cols="100" rows="2" name="dd" id="dd"
				onkeyup="a(this);"
				></textarea>
 
			<script type="text/JavaScript">
				document.getElementById('dd').addEventListener('paste', function() {
					a(document.getElementById('dd'));
				}, false);
			</script>
		</div>
	</form>

[Bovino]

Ce ne serait pas plutôt le fait qu'un coller ne rajoute pas de retour chariot ?
Donc du coup, ta fonction a() ne génère aucun changement ?

[nosferapti]

Ce ne serait pas plutôt le fait qu'un coller ne rajoute pas de retour chariot ?
Donc du coup, ta fonction a() ne génère aucun changement ?

j'ai essayé avec un copier / coller de plusieurs lignes.

je pense que je vais m'orienter vers un "onmouseover" même s'il faut déplacer la souris d'un pixel après le collage, je vais me contenter de ça

[bigboomshakala]

http://www.developpez.net/forums/d45...contenu-input/

[nosferapti]

http://www.developpez.net/forums/d45...contenu-input/

je n'ai pas de problème pour détecter les modifications au clavier, c'est la souris que je ne maîtrise pas

[nosferapti]

http://www.developpez.net/forums/d45...contenu-input/

en relisant, j'ai remarqué un message qui parlait de "setInterval" donc même si ça fait le test en continu, ça a l'air de ne pas consommer trop de ressources donc c'est

merci à tous, voilà mon code final

Code XHTML :

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
    <script type="text/JavaScript">
        function a(zonedetexte) 
        {
            zonedetexte.rows = Math.max(2, zonedetexte.value.split('\n').length);
        }
        
        setInterval(function() {
            a(document.getElementById('dd'));
            a(document.getElementById('dd2'));            
        }, 200);
    </script>
 
    <form action="aaa" method="post">
        <div>
            <textarea cols="100" rows="2" name="dd" id="dd"
                onkeyup="a(this);"
                ></textarea>
        </div>
    </form>
 
    <form action="aaa" method="post">
        <div>
            <textarea cols="100" rows="2" name="dd2" id="dd2"
                onkeyup="a(this);"
                ></textarea>
        </div>
    </form>