Formulareintrag editierbar machen

[Tobias Hahner]

Hallihallo!

Dazu müsste man "eigentlich" nur die Umbrüche (Schnellschuss: ich würde mal sagen die Zeichenfolge \r\n, ist aber OS-abhängig, glaube ich) in einen HTML- Zeilenumbruch (<br>, oder <br />, je nachdem) umwandeln.

Hab ich auch gedacht und deine Funktion umgebaut. Aber anstatt den Zeilenumbruch zu machen, wird wirklich ein <br> eingefügt :-( Hab ich das was falsch gemacht? Oder es an der falschen Stelle eingefügt?

Nein, hast Du nicht. Der "Fehler" liegt an anderer Stelle:

function attachInputField() {
// blende das span aus:
helpers.elem.css('display','none');
// hänge ein input mit dem im span enthaltenen Text hinter das span
//helpers.inp = $('<input class="temp" type="text" value="'+helpers.text+'">').insertAfter(helpers.elem);
helpers.inp = $('<textarea rows="3" cols="100">'+helpers.text+'</textarea>').insertAfter(helpers.elem);
// gib dem input einen onblur- eventhandler (s.weiter unten)
helpers.inp.blur(function(){
helpers.newtext = helpers.inp.val();
helpers.newtext = helpers.newtext.replace(/(\r\n)|(\r)|(\n)/g, '<br>');

// und zwar hier:

detachInputField();
});
helpers.inp.focus();
}

  
In der Funktion detachInputFields (die Du für die Textareas ja auch modifizieren musst), gibt es die Zeile  
~~~javascript
  
// setze den neuen Text in das span ein  
helpers.elem.text(helpers.newtext);  

Der "Fehler" liegt wohl nun darin, dass die Methode "text" den Text, den sie einsetzen soll, auch wirklich als Text behandelt. Das ist eigentlich kein Fehler, sondern es werden die Regeln des Kontextwechsels beachtet.

Um HTML- Code in ein Element einzusetzen, gibt es eine ganz ähnliche Funktion. Ändere einfach die Zeile um in

  
helpers.elem.html(helpers.newtext);  

Sei Dir aber dabei der Gefahren bewusst! Auf diese Weise ist es möglich, quasi beliebigen Code, auch Javascript, über die Textarea einzuschleusen!
Du musst also tierisch aufpassen, dass da kein Schindluder getrieben werden kann.

Vereinfacht gesagt, musst Du dafür sorgen, dass eventuell eingegebener HTML-Code nicht aus der Textarea einfach übernommen werden darf. In PHP wäre die geeignete Funktion dafür htmlspecialchars. Leider gibt es die von Haus aus in Javascript nicht, aber da wir ja eh schon JQuery benutzen, kann man sich die eben noch ungewünschten Eigenschaften von text() zunutze machen:

  
function htmlspecialchars(irgendwas) {  
// erzeuge ein Dummy- Element, um die Maskierungseigenschaften von .text() benutzen zu können. Extrahiere anschliessend den umgewandelten Inhalt und gib ihn zurück  
return $('<span>').text(irgendwas).html();  
}  

Bedenke, dass erst nach der Verwendung dieser htmlspecialchars- Funktion die Zeilenumbrüche ersetzt werden dürfen, sonst bist Du wieder da, wo Du eben noch warst ;)

Beste Grüsse,
    Tobias Hahner