Bonjour,
Je n'arrive pas à protéger les apostrophes dans mon code.
J'ai fait un bout de programme dont le but est de transformer du texte dans un div en un champ input quand on double clic dessus et de l'enregistrer quand on sort du champ (à terme, avec un peu d'ajax, ça s'enregistrera automatiquement et ça permettra de modifier très facilement un formulaire).
Quand je double clic, que je rajoute des doubles apostrophes, que je clique ailleurs et que je redouble clic dessus, ce qui suit la double apostrophe disparait.
Code :
- <html>
- <STYLE type="text/css">
- .display{
- background-color: White;
- color: Black;
- }
- .display input{
- background-color: White;
- border: 0px;
- color: #000088;
- }
- </STYLE>
- <script language="JavaScript">
- function addslashes(ch) {
- ch = ch.replace(/\\"/g,'\\\\"');
- return ch
- }
- function edit(id)
- {
- var div = document.getElementById(id);
- if (div.firstChild.nodeType==3) {
- div.innerHTML= '<input name="input" type="text" value="'+addslashes(div.firstChild.data)+'" onblur="save(this.parentNode.id);">';
- }
- div.ondblclick='';
- }
- function save(id)
- {
- var div = document.getElementById(id);
- var valeur = div.firstChild.value;
- // ici on sauvegarde la valeur avant
- div.innerHTML= valeur;
- div.ondblclick=function () {edit(this.id);};
- }
- </script>
- <body>
- <div class='display' id='coucou' ondblclick='edit(this.id);'>Choux</div><br>
- <div class='display' id='hiboux' ondblclick='edit(this.id);'>Hiboux</div><br>
- <div class='display' id='cailloux' ondblclick='edit(this.id);'>Cailloux</div><br>
- </body>
- </html>
|
Question bonus : pourquoi ça se retransforme bien quand je clique ailleurs, mais pas quand je double clique sur un autre champ ? Y'a t'il un autre événement que onBlur pour dire qu'on est parti du champ du formulaire en question ?
Merci beaucoup pour votre aide,
Axel
