IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    D�veloppeur informatique
    Inscrit en
    Ao�t 2006
    Messages
    24
    D�tails du profil
    Informations personnelles :
    �ge : 49
    Localisation : France, Paris (�le de France)

    Informations professionnelles :
    Activit� : D�veloppeur informatique

    Informations forums :
    Inscription : Ao�t 2006
    Messages : 24
    Par d�faut D�placer un �l�ment Input avec une fonction
    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 ????

  2. #2
    Membre chevronn�
    Inscrit en
    Novembre 2006
    Messages
    336
    D�tails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 336
    Par d�faut
    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

  3. #3
    Membre averti
    Profil pro
    D�veloppeur informatique
    Inscrit en
    Ao�t 2006
    Messages
    24
    D�tails du profil
    Informations personnelles :
    �ge : 49
    Localisation : France, Paris (�le de France)

    Informations professionnelles :
    Activit� : D�veloppeur informatique

    Informations forums :
    Inscription : Ao�t 2006
    Messages : 24
    Par d�faut
    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�.

  4. #4
    Expert confirm�
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par d�faut
    Citation 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>

  5. #5
    R�dacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 45
    Localisation : France, Val de Marne (�le de France)

    Informations professionnelles :
    Activit� : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par d�faut
    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

  6. #6
    Membre averti
    Profil pro
    D�veloppeur informatique
    Inscrit en
    Ao�t 2006
    Messages
    24
    D�tails du profil
    Informations personnelles :
    �ge : 49
    Localisation : France, Paris (�le de France)

    Informations professionnelles :
    Activit� : D�veloppeur informatique

    Informations forums :
    Inscription : Ao�t 2006
    Messages : 24
    Par d�faut
    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 ?

  7. #7
    Membre exp�riment� Avatar de Cpas2latarte
    Inscrit en
    Janvier 2006
    Messages
    237
    D�tails du profil
    Informations forums :
    Inscription : Janvier 2006
    Messages : 237
    Par d�faut
    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.

Discussions similaires

  1. [Lisp] Communiquer avec une fonction en c++
    Par Nadine dans le forum Lisp
    R�ponses: 5
    Dernier message: 10/01/2005, 20h15
  2. Probl�me avec une fonction date.
    Par kmayoyota dans le forum ASP
    R�ponses: 8
    Dernier message: 09/09/2004, 12h33
  3. Thread avec une fonction membre d'une classe
    Par SteelBox dans le forum Windows
    R�ponses: 6
    Dernier message: 01/03/2004, 01h15
  4. Retourner une valeur avec une fonction
    Par stephtbest dans le forum ASP
    R�ponses: 4
    Dernier message: 31/10/2003, 16h37
  5. [VBA-E] avec une fonction value
    Par laas dans le forum Macros et VBA Excel
    R�ponses: 3
    Dernier message: 28/11/2002, 13h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo