div éditable tous naviagateurs

**franfr57** · 31/10/2008, 09h28

Bonjour,
je souhaite faire un div éditable mais je n'en est pas trouvé un tout simple qui fonctionne avec tous les navigateurs.
J'entends par tout simple, que je souhaite seulement avoir un bloc éditable (pas de fonctions gras, taille...)
En fait sur ma page je souhaite faire pleins de petit bloc éditable.

Au début j'ai voulu mettre un champ text mais je crois qu'il est pas possible de le mettre a la taille de mon div et donc je dois me contenter d'une trop petite police (8) alors que dans mon div j'avais 12...

Merci pour vos réponses

**le_chomeur** · 31/10/2008, 09h35

dans ce cas la utilise plutôt une balise textarea que tu pourras stylé comme tu le souhaite ( taille , largeur , fond , police etc

)

**franfr57** · 31/10/2008, 09h39

Le problème reste le même dès que dépasse 8 pixel dans la balise input mon bloc div s'agrandit...

**SpaceFrog** · 31/10/2008, 09h51

tu peux nous montrer un bout de code ???

**le_chomeur** · 31/10/2008, 09h51

met ta div en overflow ^^ et pas compris le problème de ta div ...

**franfr57** · 31/10/2008, 10h01

Dans le pogramme http://www.jsgantt.com/ je souhaite mettre les lignes de mon tableau éditable.

Exemple : rendre éditable la colonne resource.

**SpaceFrog** · 31/10/2008, 10h07

Teste ça:

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
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<style type='text/css'>
td,#saisie { border:solid 1px black;
                 width:100px;
                 font-family:verdana;
                 font-size:12px;
                 line-height:20px;
                 }
#saisie {color:red;}
 
 
 
html body {margin:0;}
 
     </style>
 
<script type='text/javascript'>
 var currentCell
function edit(Obj){
  currentCell=Obj; 
  var editbox=document.getElementById('saisie')
  editbox.style.top=currentCell.offsetTop+'px';
  editbox.style.left=currentCell.offsetLeft+'px';
  editbox.style.width=currentCell.offsetWidth+'px';
  editbox.style.height=currentCell.offsetHeight+'px';
  editbox.style.fontSize=currentCell.style.fontSize;
  editbox.style.display='';
  if (!document.all){editbox.style.paddingTop='4px'};
  editbox.value=(currentCell.innerHTML!="&nbsp;")?currentCell.innerHTML.replace:'';
  editbox.focus();
  editbox.value=editbox.value
  }
 
 
function editSelect(Obj1){
  editsel.style.width=currentCell.offsetWidth+'px';
  editsel.style.height=currentCell.offsetHeight+'px';
  var LesOptions=Obj1.getAttribute("ArrayOpt").split(';');
  while(editsel.options.length>1){editsel.removeChild(editsel.options[editsel.options.length-1])}
  editsel.style.top=currentCell.offsetTop+'px';
  editsel.style.left=currentCell.offsetLeft+'px';
  editsel.style.fontSize=currentCell.style.fontSize;
  editsel.style.visibility="visible";
 
  for(i=0;LesOptions[i];i++){
      var newOpt=document.createElement('option');
      newOpt.value=LesOptions[i];
      newOpt.innerHTML=LesOptions[i];
      if(newOpt.innerHTML==currentCell.innerHTML){newOpt.selected='selected';}
      editsel.appendChild(newOpt);
      }
   editsel.focus();   
  }  
 
function copyValue(Box){
 
TransValue="";
switch(Box.id){
  case "saisie" :   TransValue=(Box.value.length>0)?Box.value:"&nbsp;";
                        Box.value=""
                        Box.style.display='none';
                        break;
  case "MySel":     TransValue=(Box.options.selectedIndex==-1)?"&nbsp;":Box.options[Box.selectedIndex].value;
                        Box.style.top=0;
                        Box.style.left=0;
                        Box.style.visibility='hidden';    
                        break;
                        }
currentCell.innerHTML=TransValue;
}
 
 
function Myinit(){
    var TabTr=document.getElementsByTagName('tr');
 
    for(i=0;TabTr[i];i++){
          var TabTd=TabTr[i].getElementsByTagName('td');
           for(j=0;TabTd[j];j++){ 
                           TabTd[j].id="Cell"+i+"_"+j;
                           if(j==3){TabTd[j].onclick=function(){currentCell=this;
                                                                       editSelect(this)};
                                                                 }
                           else{TabTd[j].onclick=function(){edit(this)}}
                          }
   }
editsel=document.getElementById('MySel');                          
 }     
window.onResize=function(){alert('coucou');}
 </script>    
 
</head>
 
<body onload="Myinit()" >
<table >
    <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td ArrayOpt="S;E;L">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
    </tr>    
    <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td ArrayOpt="Bonjour;Aurevoir;coucou; salut">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
    </tr>                
    <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td ArrayOpt="Banane;Oranges;Kiwi;fraises">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
    </tr>                
    <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td ArrayOpt="chocolat;vanille;menthe;café;grenadine">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
    </tr>                
    <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td ArrayOpt="rouge;vert;bleu;noir;jaune;marron;taupe;violet;blanc;saumon">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
    </tr>                
    <tr>
            <td></td>
            <td></td>
            <td></td>
            <td ArrayOpt="Bonjour;Aurevoir;coucou; salut"></td>
            <td></td>
            <td></td>
    </tr>        
</table>
 
<input type='text'    style='position:absolute;display:none;top:0;left:0;width:150px;' id='saisie' onblur="copyValue(this)" value=''/>
<select id="MySel" name="hello" style='position:absolute;visibility:hidden;top:0;left:0;width:150px;' onblur="copyValue(this)" >
<option value="&nbsp;">-selectionnez</option>
</select>            
 
</body>

**SpaceFrog** · 31/10/2008, 09h38

je n'ai pas compris pourquoi un textarea ne pourrait pas convenir ... ?

div éditable tous naviagateurs

JavaScript

Vue hybride

Discussions similaires

Partager

Partager