div éditable tous naviagateurs

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

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

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

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

tu peux nous montrer un bout de code ???

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

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

Exemple : rendre éditable la colonne resource.

Teste ça:

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
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>

Merci cela à l'air pas mal.

Mais quand je tape, puis je vais dans une autre cellule.

J'ai cela qui s'affiche dans ma cellule :
Code:

1 2 function replace() { [native code]}
Est ce normal?

tu es sous quel navigateur quelle version ?

je suis sous IE 7

J'ai modifier edit(Obj) la dernière ligne :
Code:

1 2 3 4 //editbox.value=(currentCell.innerHTML!=" ")?currentCell.innerHTML.replace:''; editbox.focus(); editbox.value=currentCell.innerHTML.replace(new RegExp(" ", "g"),'');
Ca à l'ai de marcher, est ce que c'est bon pour les autres navigateurs?
Je vais tester

Pourquoi ton script ne fonctionnait pas c'était une erreur?

à l'epoque ie7 n'existait pas ...
et IE 7 a du modifier le coup des cellules vide qui ne s'affichent pas ...