JavaScript: Text einfügen an letzter Cursorposition

Question

Hallo alle zusammen,

ich habe folgendes Problem:

Ich habe eine Seite, wo man sich E-Mail-Templates anlegen kann, dazu gehört der Name, der Betreff und der Text. Zusätzlich habe ich auf der Seite noch eine kleine Tabelle mit Platzhaltern, die man im E-Mail-Template verwenden kann und dann durch bestimmte Werte ersetzt werden. Jedoch musste man diesen Platzhalter entweder manuell in die Textarea schreiben oder aus der Tabelle kopieren und in den Text einfügen.

Das möchte ich jetzt etwas vereinfachen, indem ich die Tabelle mit den Platzhaltern in ein Select-Elemtent umwandele und geplant war dann, dass man beim Klick auf ein Element (oder Doppelklick) dieses in das Feld eingetragen wird. Das ist ja soweit auch kein Problem. Das fängt jetzt erst an: Wie mache ich es am sinnvollsten, dass man sowohl in das Betreffszeilenfeld als auch das normale Feld die Platzhalter per Klick einfügen kann. Ich brauche jetzt nicht unbedingt den JavaScript-Code, ein logischer Ansatz würde mir schon reichen.

Mir fielen hierzu nur zwei Möglichkeiten ein, mit denen ich aber nicht so wirklich zufrieden bin:
a) Ich lasse die Platzhalter zweimal anzeigen, einmal für Betreff und einmal für Text und lasse es dann, je nachdem in welcher Select ich klicke, den Platzhalter entsprechend einfügen. Dann hab ich aber alles zweimal angezeigt, was bei einer langen Liste ziemlich unübersichtlich wird.
b) Beim Klicken auf eine Selectbox (jetzt gibt es wieder nur eine) frage ich, in welche Textarea kopiert werden soll. Kann aber auf Dauer ziemlich nerven, wenn man öfters sowas einfügt.
c) Ich frage die letzte Cursorposition ab, bevor man auf das Select geklickt hat und füge es dann entsprechend ein. ist das überhaupt möglich?

habt ihr eventuell andere, bessere Lösungsvorschläge?

Viele Grüße

Answer 1

Möglichkeit c) ist bestimmt am elegantesten, aber sehr aufwendig, zumal die browser sich da sehr verschieden verhalten und man alles mindestens dreifach programmieren muss.

als unkomplizierte lösung würde ich speichern, welches eingabefeld gerade "aktiv" ist (also gerade bearbeitet wird).

Answer 2

Hi,

der Lösungsansatz von kicia ist sehr gut. Ich werde ihn nur noch ein bisschen detaillieren.

Du gibst jedem Element, wo Text hinzugefügt werden kann eine feste ID, und ein onFocus-Event, dass diese ID in eine Variable speichert. Beim Einfügen des Textes fragst du anhand der zuletzt gespeicherten ID ab, welches Element den Text erhalten soll.

Ungefähr so:

var lastFocusElement;

<input id="t1" type="text" onfocus="lastFocusElement = this.id" />

document.getElementById(lastFocusElement).value = "dein Text";

Gruß Paul