Déplacer un élément Input avec une fonction

**gloumouth** · 09/03/2007, 00h25

Bonsoir,

Je travaille sur un système d'édition de champs classique : un DIV contenant un texte se change en INPUT quand on clique dessus => le texte est modifiable. Jusqu'ici tout va bien..

Le problème auquel je me retrouve confronté est que mon élément INPUT se décale légèrement par rapport à l'élément DIV d'origine sous certaines conditions (taille de la police par exemple). Du coup, cela décale et/ou déplace d'autres éléments dans ma page. Bof bof..

Une solution a été de passer le style position de l'élément INPUT en absolue et d'utiliser une fonction Javascript pour récupérer les coordonnées top/left du DIV de départ,

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
 
function getPosition(e){
	var left = 0;
	var top  = 0;
 
	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}
 
	left += e.offsetLeft;
	top  += e.offsetTop;
 
	return {x:left, y:top};
}

puis de déplacer l'élément INPUT avec

Code :

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

1
2
3
 
input.style.top = ...
input.style.left = ...

Mais cela n'est pas viable car je me retrouve confronté à d'autres problèmes de positionnements, l'élément INPUT créant un vide dessous lui.

Je souhaiterais donc pouvoir déplacer mon INPUT sans avoir à toucher à la propriété de positionnement.

Des idées ????

**Shinuza** · 09/03/2007, 00h39

Si tu veux que ton input se déplace sans déranger ce qu'il y'a autour de lui, le mieux c'est de lui définir une position : absolute, et de le mettre dans un élément qui a une position relative

**gloumouth** · 09/03/2007, 10h04

Salut,

Merci de ta réponse. En fait, mon champs modifiable est déjà encapsulé dans un DIV "container" dont la propriété position n'est pas définie (par défaut cet élément se voit assigner une position relative il me semble).

Mais le véritable problème est ailleurs. Mon champ INPUT se redimensionne à chaque fois qu'on tape une touche (onkeydown) un peu comme le titre d'une page Netvibes. Quand l'élément INPUT est en absolute, les autres éléments qui sont sur la même ligne et à sa droite se décalent à gauche et dessous comme si mon DIV "container" était ignoré. Si ce n'était pas le cas, je n'aurais plus qu'à redimensionner le "container" de concert avec l'input..

Désolé pour cette omission, j'aurais peut-être du commencer mes explications par là.

**Auteur** · 09/03/2007, 15h58

Envoyé par gloumouth

Bonsoir,

Je travaille sur un système d'édition de champs classique : un DIV contenant un texte se change en INPUT quand on clique dessus => le texte est modifiable. Jusqu'ici tout va bien..

Des idées ????

Pourquoi ne pas utiliser un textarea ?

Code html :

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
 
<html>
<head>
<style type="text/css">
<!--
textarea{
border: 1px groove #AAAAAA;
}
//-->
</style>
 
<script type="text/javascript">
<!--
function activer(obj)
{
  obj.readOnly="";
}
function desactiver(obj)
{
 obj.readOnly="readonly";
}
 
//-->
</script>
</head>
 
<body>
<textarea rows="10" cols="30" readonly="readonly" onclick="activer(this)" onblur="desactiver(this)">
bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla 
</textarea> 
 
</body>
</html>

**bigboomshakala** · 10/03/2007, 16h28

quand l'input ne doit pas être visible -> "display:none"

j'ai eu à implémenter une grille il y a peu, ça n'a pas posé de pb. un input pour toute la grille qui se déplace sur la cellule cliquée et qui se redimensionne en conséquence

**gloumouth** · 12/03/2007, 14h10

En réponse à Auteur: je ne pense pas qu'un textarea résoudra mes problèmes car je souhaite avoir un champ qui se redimensionne à chaque onkeydown en fonction de son contenu. cela dit, je n'ai peut-être pas tout à fait saisi ce que tu imagines.

En réponse à bigboomshakala: quand tu dis

qui se redimensionne en conséquence

ça veut dire à chaque fois que tu tapes une touche ou seulement au moment du switch, quand l'élément devient éditable ?

**Cpas2latarte** · 12/03/2007, 14h13

et pourquoi pas un div avec la propriété contenteditable = true
. On recupere la "valeur" avec la propriété innerText ou innerHTML.
Par contre il faut vérifier si ça fonctionne sur firefox.

Déplacer un élément Input avec une fonction

JavaScript

Discussions similaires

Partager

Partager