JavaScript-Snippet: Text zum Editieren anklicken

Die schöne neue bunte hyperaktive Web 2.0-Welt bringt ja die tollsten Sachen mit sich. Als eine der „nettesten“ (aber wie immer auch nicht wirklich benötigten) Neuerungen empfinde ich die „Klick mich an und ändere mich“-Funktionen, die sich in diversen Web-Applikationen wiederfinden. Ich habe mich mal eine halbe Stunde hingesetzt und aus Übung und Interesse die Funktionalität nachgebaut. Wer sie einsetzen will, der findet hier das passende Snippet zum einfachen Einbinden.

Ich erkläre mal ganz kurz was das ist: Man hat z.B. eine Überschrift, einen Text, o.ä. und klickt darauf. Nun kann man den Text sofort bearbeiten und nach dem Abschluss des Editierens steht er so als fester Teil der Seite da und kann ggf. noch über einen AJAX-Aufruf gespeichert werden.

Ich demonstriere diese Click to Edit-Funktionalität mal am Beispiel des nachfolgenden Textblocks:

Anklicken um diesen Text zu ändern

Toll, oder? :-)
Die beiden JavaScript-Funktionen kann man sich hier herunterladen, der Rest wird wie gefolgt eingebunden:

Anklicken um diesen Text zu ändern




Das Snippet habe ich mit dem Firefox und dem Internet Explorer (6 und 7) getestet und als funktionstüchtig empfunden. :-)
Wer auch immer will, darf es für alles benutzen was er will aber ich übernehme keine Haftung für irgendwen und irgendwas! :-)

War dieser Artikel hilfreich für Sie?
[Gesamt: 0 Durchschnitt: 0]

7 thoughts on “JavaScript-Snippet: Text zum Editieren anklicken

  1. seakey sagt:

    Auf der Suche nach genau dieser Funktion bin ich hier auf deine Seite gestoßen. Nette Umsetzung ;)
    Aber eigtl suche ich eine Alternative dieser Funktion ohne JS. Hättest du einen Tip bzw. Link für mich?

  2. Ronald sagt:

    Also ohne JavaScript wird’s schwierig, immerhin muss ja schon der Klick auf den Text mittels JS-„onclick“ abgefangen werden, selbst wenn man dann die Seite neulädt und z.B. mit Perl oder PHP eine Textbox anstelle des Textes erscheinen lässt. Diese Variante stelle ich aber auch generell mal als behäbig und nervig dahin. ;-) Oder wie hast Du es Dir vorgestellt?

  3. seakey sagt:

    Danke erstmal für die schnelle Antwort. Hatte es mir eigtl so vorgestellt, dass bei Klick auf den zu editierenden Text ein Textfeld an selber Stelle aufgeht, in dem man rumeditieren kann, und dann per Klick diese Änderungen speichert. Müsste doch eigtl. ohne JS gehen oder.
    Meine Überlegungen sind aber erst am Anfang, deshalb wollte ich erst einmal etwas recherchieren ;)

  4. Ronald sagt:

    Also das ist eigentlich haargenau genau das, was mein JavaScript-Krempel da macht und wen Du da nicht zwischendurch 3x die Seite neuladen willst, dann wird das nicht ohne JavaScript gehen. ;-)

  5. seakey sagt:

    Ok, werde mir dazu noch ein paar Gedanken machen. Falls ich was zustande bringe, werd ich dich informieren :)

  6. kkapsner sagt:

    Ohne JS:

    inhalt

    Getestet in IE8 (laut Spezifikation seit 5.5 drin), FF 3, Opera 10, Safari 4 und Chrome 5.

  7. kkapsner sagt:

    Mist: HTML-Tags wurden nicht dargestellt…
    also:
    [div contenteditable=“true“]inhalt[/div] mit [ ==

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *