[DOM] Retourner variable js dans champ texte d'un formulaire

**mazou** · 08/06/2007, 16h24

Bonjour,

Je bosse sur une page qui permet de positionner des éléments sur une page.
J'arrive à récupérer la position de l'élément (x ou y), mais j'aimerai qu'elle s'affiche sur la page dans un champ texte de formulaire, en temps "réel", que ce champ texte s'actualise automatique dès qu'il la variable change.

En mettant ceci, je retourne la variable, mais elle ne s'actualise pas :

Code :

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

1
2
3
<script type="text/javascript">
document.write('<input type="text" name="x" size="20" value="' +x+ '"></input>')
</script>

Pourriez-vous m'aider à faire cela ?

Merci d'avance

**KiLVaiDeN** · 08/06/2007, 16h29

Salut,

Pour changer une variable en temps réel il faut capturer les évènements qui sont à prendre en compte, en l'occurence l'évènement qui t'interesse est mousemove.

Ensuite, à chaque capture de cet évènement, tu peux faire ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<script>
	function afficherCoordonnees(X, Y) {
		document.getElementById('monChampTexte').value = X + ", " + Y;
	}
</script>
</head>
<body>
<form>
<input type="text" id="monChampTexte" name="monChampText"/>
</form>
</body>

**SpaceFrog** · 08/06/2007, 16h35

créé plutot ton input avec le DOM plutot que de é"bidouiller" avec du document.write ...

Code :

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

1
2
3
4
5
6
var newinput=document.createElement('input')
newinput.type="text";
newinput.id="x";
newinput.id="id"+x;
newinput.size"20";
newinput.value=x;

et pour l'actualiser :

Code :

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

document.getElementById('id'+x)=tavariable

**mazou** · 11/06/2007, 12h01

Merci pour vos réponses, mais pour l'instant je n'y arrive toujours pas.

Voici où j'en suis :

Code :

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

1
2
3
4
5
6
7
8
<script type="text/javascript"> 
 
function afficherCoordonnees(x, y) {
		document.getElementById('monChampTexte').value = x + ", " + y;
	}
</script>
 
		 <input type="text" id="monChampTexte" name="monChampText" mousemove="return afficherCoordonnees(x,y);"/>

Les variables x et y existent bien, mais rien ne s'affiche dans le champs texte.

Une idée ??
Merci

PS : SpaceFrog, je fais pour l'instant au plus simple, quitte à l'améliorer une fois qu'il fonctionnera.

**SpaceFrog** · 11/06/2007, 15h06

pourquoi le return ???

**mazou** · 11/06/2007, 16h42

Oui en effet... Pourquoi le return...

J'ai fini par y arriver, il suffisait de mettre la fonction afficherCoordonnees() dans un monmousemove() dans un div.
Par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script language="JavaScript">
function afficherCoordonnees() {
document.getElementById('y').value = document.getElementById("lot1").offsetTop;
document.getElementById('x').value = document.getElementById("lot1").offsetLeft;
 
	}
 
//-->
</script><input type="hidden" id="y" name="y" "/>
		        	 <input type="hidden" id="x" name="x" />
  <div class="plan" onmousemove="afficherCoordonnees();">
Le contenu...
</div>

merci pour votre aide

[DOM] Retourner variable js dans champ texte d'un formulaire

JavaScript

Discussions similaires

Partager

Partager