Klaus: Frage zu contenteditable

Hallo,

ich setze mit

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

</SPAN>

eine Textzeile auf editierbar.

Leider erscheint beim Klick auf den Text auch eine Markierung um das Span und ich könnte jetzt auch die Ränder mit der Maus ziehen.

Kann ich das irgendwie verhindern und erreichen, dass alleine der Text editierbar ist, das Span-Tag als solches aber unangetastet bleibt.

Danke

Klaus

  1. Hallo Klaus,

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

    </SPAN>

    Das ist ja interessant, dieses offensichtlich MSIE-proprietäre Attribut kannte ich noch gar nicht. Bei mir (MSIE 6.0 unter Win98) gibt es das Problem mit dem Rand um das Span-Element aber auch nicht. Und selbst wenn ich mit CSS einen Rahmen darum setze, kann ich da nichts ziehen, auch nicht nach Klick auf den kompletten text oder teile desselben.

    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.

    Gruß Gernot

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

  2. Hallo Klaus,

    schau auch mal da:

    https://forum.selfhtml.org/?t=90590&m=543421

    Ich habe mir erlaubt, einen neuen Thread zu eröffnen.

    Gruß Gernot