Autocomplétion syntaxtique style VB6

Salut,
un début de solution serait de créer un span en position:absolute dans un body mais il ya 2 problèmes si tu utilises le designMode d'un document, Gecko/Midas permet le redimensionnement direct d'un div/span etc. L'autre solution serait de l'ajouter dans un div/span ou p mais il faudrait soit simuler le designMode en capturant toutes les entrées clavier, soit de taper dans un textarea en sous-impression mais tu seras obligé de fixer la même police dans le textarea et dans le div. Le plus simple resterait donc quand même de forcer la police utilisée et de calculer manuellement la position du curseur car à ma connaissance tu ne peux pas récupérer les coordonnées du curseur en px.
Bye

textarea :
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 <textarea id="t" cols="20" rows="20" style="position:absolute;color:white;font-family:arial;font-size:12px;"> </textarea> <div id="i" style="position:absolute;padding:0px;font-family:arial;font-size:12px;"></div> <script> // IE if(document.attachEvent) { document.attachEvent('onkeyup', processKey); document.attachEvent('onkeydown', processKey); } // Gecko else if(document.addEventListener) { document.addEventListener('keyup', processKey, false); document.addEventListener('keydown', processKey, false); } // Callbacks des événements function processKey(evnt) { if(span = document.getElementById("d")) { document.getElementById("i").removeChild(span); } document.getElementById("i").innerHTML = document.getElementById("t").value + '<span id="d" style="position:absolute;width:20px;border:1px solid #666666"><p>ab</p><p>abc</p></span>'; } </script>
designMode :
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 <iframe id="edIframe"></iframe> <script> // Définition des variables globales edFrameWindow = document.getElementById('edIframe').contentWindow; edFrameDocument = document.getElementById('edIframe').contentWindow.document; edFrameDocument.designMode = "on"; // Ecriture du body de l'iframe edFrameDocument.open(); edFrameDocument.write('<body></body>'); edFrameDocument.close(); // IE if(edFrameDocument.attachEvent) { edFrameDocument.attachEvent('onkeydown', processKeyDown); } // Gecko else if(edFrameDocument.addEventListener) { edFrameDocument.addEventListener('keydown', processKeyDown, false); } // Callbacks des événements function processKeyDown(evnt) { showDiv(); } function showDiv() { if(span = document.getElementById("d")) { edFrameDocument.removeChild(span); } // Création du span span = edFrameDocument.createElement("span"); span.setAttribute("style", "position:absolute;width:20px;border:1px solid #666666"); span.setAttribute("id", "d"); span.innerHTML = "<p>tytry</p><p>ytuyt</p>"; // IE if(edFrameDocument.selection) { edFrameDocument.selection.createRange().pasteHTML(span.outerHTML); } // Gecko else { edFrameWindow.getSelection().getRangeAt(0).insertNode(span); } } </script>
Tu peux utiliser le même span pas la peine de le recréer à chaque fois :P
Autre chose, une copie avec innerHTML peut prendre beaucoup de temps dans la soluce 1 tu peux créer/copier le noeud plutot que de passer par innerHTML. Enfin perso je ferais ca en Java ^^.