MarkX: HTML-Elemente editierbar machen

Moin,

gibt es die Möglichkeit den Inhalt eines <p>-Elements mit Javascript editierbar zu machen? Das heißt ich möchte, wenn die Seite aufgerufen ist, den Text in dem <p>-Element beliebig verändern können(wie in einer <textarea>). Ist das möglich?

Hintergrund: Wenn der Text geändert wurde, würde ich den Inhalt in ein hidden-field eines Formulars übertragen und mit diesem Formular ein Datenbankfeld updaten.

Anwendungsgebiet ist ein Intranet. Welcher Browser dafür verwendet wird ist meiner Wahl überlassen.

MfG
MarkX.

  1. Hallo MarkX,

    warum nimmst Du dafür nicht ein einfaches Input-Feld, welches Du mittels CSS entsprechend Deinen Vorstellungen abänderst?

    Mit freundlichem Gruß
    Micha

    --
    LeagueEditor JavaScript :: simple Ligaverwaltung auf der Basis von JavaScript || JS Tetris :: für zwischendurch
    1. Hallo Micha,

      warum nimmst Du dafür nicht ein einfaches Input-Feld, welches Du mittels CSS entsprechend Deinen Vorstellungen abänderst?

      auch wieder richtig. So werde ich dann sicherlich auch machen.

      Vielen Dank!

      MfG
      MarkX.

  2. Hi !

    <HTML>
    ...
    <P ID="bla">Text, der geaendert wird
    ...
    <SCRIPT>
    document.getElementByID("bla").innerHTML="Neuer Text";
    </SCRIPT>
    ...
    </HTML>

    Du gibst dem Paramgraph eine ID, ueber die darauf zugegriffen werden kann. Mit getElementByID greifst Du dann darauf zu und mit innerHTML aenderst Du dann "was drin steht" (daher auch innerHTML).

    Gruß

    Hans

    1. Hallo Hans,

      ja OK. Das ist schon richtig. Diese Vorgehensweise ist mir bekannt. _Editierbar_ im Sinne von "editierbar wie in einer <textarea>" ist der Text damit allerdings nicht.

      So ähnlich wie Du vorschlägst hatte ich das ganze bis jetzt nämlich realisiert. Eine <textarea>, in die ein Text geschrieben wird und onKeyup wird dann der Text des <p>-Elements entsprechend der von Dir beschriebenen Methode geändert.
      Ich dachte, es gibt aber vieleicht einen Trick mit dem ich direkt in dem <p>-Element rumschreiben kann.

      MfG
      MarkX.

      1. Hallo MarkX,

        du könntest per onklick das <p> in ein <input...> unwandeln und den vorher gespeicherten Text wieder reinschreiben. Per css kannst du das <input> (fast?) wie ein <p> aussehen lassen. getElement... oder this, createElement und replaceChild sollten helfen.

        Gruß, Jürgen

        1. Hallo Jürgen,

          das ist ne super Idee. So in die Richtung hatte ich auch schon gedacht. Vielen Dank, ich werde es versuchen!

          MfG
          MarkX.

  3. hallo,

    javascript:document.getElementById('id').contentEditable=true;

    läuft aber nur im ie

    grüße basti

    1. Hallo,

      sensationell. Genau das hab ich gesucht!
      Vielen Dank!

      MfG
      MarkX.

      1. Hi,

        sensationell. Genau das hab ich gesucht!

        fuer Gecko gibts designMode:
        http://www.mozilla.org/editor/ie2midas.html

        Gruesse, Joachim

        --
        Am Ende wird alles gut.
        1. Hallo!

          Vielen Dank für den Hinweis!

          MfG
          MarkX.