Modification curseur avec texte entré dans 1 textfield

Version imprimable

14/02/2006, 10h08
taillooo

Modification curseur avec texte entré dans 1 textfield

Bonjour a tous,
Je voudrais mettre le texte entré dans un textfield et validé, en bas a gauche du curseur. Et pouvoir le changer aussi svt que necessaire.

En gros je tape "2" dans les textfield, je valide, et un petit "2" se retrouve accroché a mon pointeur.

ca fait un moment maintenant que je cherche, j'arrive bien a afficher un texte ou le retirer en cliquant sur des boutons, mais je n'arrive pas a afficher celui que je rentre dans un champ texte.

Mon appli fonctionne a la fois sous IE6 et FF1.5.

Auriez vous des idées ?
Merci !

Bon juste pour faire avancer la chose ... seulement j'ai un souci pour arriver à declencher le handlerMM sous firefox ... il n'a pas l'air d'accepter le onmousemove ...
J'ai essayé de lancer la focntion dans un setInterval sans succès ...
Mais ça tourne déja sous IE ...

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
<script type='text/javascript'>
var x,y
var flag=0
var message
var xpos
var ypos
 
 
function handlerMM(e){
	x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
	flag=1
}
 
function trace() {
	if (flag==1 && document.all) {
   		xpos=x
		ypos=y
 
			var thisspan = document.getElementById('myspan')
			thisspan.innerHTML=message
    		thisspan.style.posLeft=xpos+10
			thisspan.style.posTop=ypos+10
    	}
 
 
	else {
			xpos=x
			ypos=y
			alert(posx +' ' +posy)
			var thisspan = document.getElementById('myspan')
			thisspan.innerHTML=message
    		thisspan.style.left=xpos+'px'
			thisspan.style.top=ypos+'px'
    	}
 
	var timer1=setTimeout("trace()",1)
}
</script>
 
</head>
<body onmousemove="handlerMM();" >
<div style="position:absolute; width:12px;height:12px;z-index:2;" id="myspan"></div>
<input type="text" onkeyup="message=this.value;trace();" />
 
</body>
</html>

arf !!
la bataille fut rude !
mais la grenouille de l'espace en sort encore uns fois vainqueur !!!

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
<script type='text/javascript'>
var myx,myy
var flag=0
var message
var xpos
var ypos
 
 
if (navigator.appName == 'Netscape') { 
document.captureEvents(Event.MOUSEMOVE); 
document.onmousemove = netscapeMouseMove; 
} 
 
function netscapeMouseMove(e) { 
 
		myx = e.clientX; 
		myy = e.clientY; 
			flag=1
 
	} 
 
function microsoftMouseMove() { 
 
		myx = window.event.x; 
		myy = window.event.y; 
		flag=1
 
}
 
 
function trace() {
 
 
	if (flag==1 ) {
   		xpos=myx
		ypos=myy
			var thisspan = document.getElementById('myspan')
			thisspan.innerHTML=message
    		thisspan.style.left=xpos+12+'px';//(!document.all)?xpos+15+'px':xpos+10+'px';
			thisspan.style.top=ypos+12+'px';//(!document.all)?ypos+15+'px':ypos+10+'px';
    	}
 
 
	var timer1=setTimeout("trace()",1)
}
</script>
 
</head>
<body onmousemove="microsoftMouseMove()">
<div style="position:absolute; width:12px;height:12px;z-index:2;" id="myspan"></div>
<input type="text" onkeyup="message=this.value;trace();" />
 
</body>
</html>

14/02/2006, 12h19
taillooo

ah ouais !!
chapeau bas mister SpaceFrog !! la j'avoue etre bien largué, je suis encore qu'un junior en JS.

Mais j'aimerais qd mm bien comprendre un chouille, si tu as un peu de temps, pourrais tu m'expliquer en gros, voir mettre des commentaires ?

En tout cas, un grand merci, ca marche nickel !! :-)

PS : euh finalement sous IE, j'ai pas le textfield... bizarre! tu penses que ca vient de ma conf (m'etonnerais un peu mais bon...) ?
14/02/2006, 13h11
SpaceFrog

pas l'input sous IE ???
tu as fais un copier coller ???

quelle version d'IE ???
testé sous les deux chez moi et ça roule ...

pour le principe en fait il y a un div sur la page qui focntionne comme une infobulle.
le plus dur fut de récupérer la positoion de la souris de façon universelle
d'ou les deux fonctions
function netscapeMouseMove(e)
et
function MicrosoftMouseMove()
qui captent en permanence (onmousemove du body) la position de la souris ...
ensuite y'a plus qu'a mettre le contenu de l'input dans l'infobulle avec le innerHTML
et lui attribuer le top et le left avec corrcetif pour bien positionne le teste par rapport au curseur ...
14/02/2006, 14h01
taillooo

Ok, pb résolu, cela provenait du slash en trop a la fin du textfield.

Merci pour les explications, je vois bien l'imbrication maintenant. Mais encore une chose : je n'arrive pas à voir l'interet du flag à 1. Pourrais-tu m'eclairer ?
14/02/2006, 14h05
SpaceFrog

ben au démarrage de la page si tu n'as pas encore les positions de myx et myy ça plante... il faut donc que tu sois au moins passé une fois dans la fonction pour que le script ne plante pas ...
14/02/2006, 14h14
taillooo

ok, well understood.
Aller, j'integre ca a mon code, c parti!

Encore merci SpaceFrog ! :D