Gernot Back: Frage zu contenteditable

Beitrag lesen

Hallo nochmal Klaus,

das fände ich ja eigentlich recht nett, wenn es so etwas auch für die anderen Browser als den MSIE gäbe, denn dafür hätte ich bei meinen Sprachlern-Projekten ebenfalls Verwendung.

<SPAN contenteditable="true">
Das ist der editierbare Text im Span-Tag
</SPAN>

Warum arbeitest du nicht lieber mit Formular-Textfeldern, deren Border du ja mit CSS auch unterdrücken kannst? Das läuft dann auch in den meisten Browsern, von Netscape 4 einmal abgesehen.

Was dann natürlich ebenfalls nicht ohne Weiteres läuft, ist der Zeilenumbruch innerhalb des editierbaren Bereichs. Dazu müsste man ggf. mit dem Node-Objekt bei Eingabe eines Leerzeichens für jedes neue Wort ein neues Input-Element anhängen. Ich experimentiere da auch gerade rum. Im Moment beiße ich mir an dem mit "this" rückbezüglichen EventHandler allerdings die Zähne aus, den ich für das anzuhängende neue Input-Element ja dann auch wieder einrichten muss.

Ich will dir aber meinen Zwischenstand mit nur einem nicht-umbrechenden Input-Element nicht vorenthalten.

Gruß Gernot

Hier mein Qellcode:

<html>
<head>
<title>editable</title>
<style type="text/css">
<!--
input {
  border-style:solid;
  border-width:0px;
  font-family:monospace;
  font-size:14px;
}
-->
</style>
<script type="text/javascript" language="JavaScript">
<!--
function passAn (x) {
 x.size=x.value.length;
}
//-->
</script>
<noscript>Ohne JS wachsen die Eingabefelder nicht mit, schade!</noscript>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<p>
<span style="font-family:monospace;font-size:14px">
Dieser Text ist nicht editierbar.
</span>
<form name="formular" action="" method="" target="" style="display:inline">
<input onKeypress="passAn(this)" type="Text" name="meinFeld"
value="Das ist der editierbare Text im Input-Tag, der allerdings nicht umbricht."
size="73" maxlength="">
</form>
<span style="font-family:monospace;font-size:14px">
Dieser Text ist wieder nicht editierbar, bricht aber um.
</span>
</p>
</body>
</html>