contenteditable div-Auswahl verliert, wenn ein anderer Eingang konzentriert
Ich habe ein problem mit contenteditable div. Wenn ich ausführen wollen, einen einfachen Befehl (wie Fett oder Kursiv) auf ihn, ich Tue das folgende:
- merken Sie sich den div, da es den Fokus verliert, nachdem ich klicken Sie auf die Schaltfläche "Fett")
- auf die Schaltfläche klicken, ich fokussieren Sie das div-Element und führen Sie den Befehl Fett
- alles funktioniert
Nun tritt das problem auf wenn ich versuche etwas zu tun, was schwieriger ist. Zum Beispiel möchte ich zeigen, ein eigenes Dialogfeld mit einem Eingabefeld:
- merken Sie sich die div
- auf die Schaltfläche klicken, wird ein dialog angezeigt (alles noch ok)
- Benutzer konzentriert sich ein Eingabefeld in diesem dialog (und das ist, wo alles bricht)
Das problem mit diesem ist, dass, sobald ein input-element fokussiert ist, nicht nur, dass meine contenteditable div-Element den Fokus verliert - er verliert auch die Auswahl und verschiebt den cursor an den Anfang, sobald ich mich konzentrieren es.
Also meine Frage ist: wie kann ich verhindern, dass eine contenteditable div zu verlieren Ihre Auswahl, nachdem ich den Fokus auf ein anderes input-element?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn die input-und contenteditable-element im gleichen Dokument, werden Sie nicht in der Lage zu verhindern, dass die Auswahl in die contenteditable-element zerstört wird. Jedoch, was Sie tun können, ist, speichern Sie die Auswahl, bevor Sie in das Eingabefeld den Fokus erhält und restore wird die Selektion nach dem der dialog geschlossen wird.
Hier einige einfache Beispiel-code:
https://stackoverflow.com/a/3316483/96100
Und hier ist ein vollständigeres Beispiel:
https://stackoverflow.com/a/4690057/96100
Wenn Sie entweder den Eingang oder contenteditable-element innerhalb eines separaten iframe, den meisten Browsern (wenn auch nicht IE) wird die Erhaltung der ursprünglichen Auswahl.