Ich muss Highlight für Zahlen implementieren (in Zukunft kompliziertere Regeln hinzufügen) im contenteditable div. Das Problem ist, wenn ich neuen Inhalt mit Javascript ersetze, ändert sich DOM und contenteditable div verlor Fokus. Was ich brauche ist Fokus auf div mit Caret auf der aktuellen Position, so dass Benutzer können einfach ohne Probleme eingeben und meine Funktion einfache Hervorhebung Zahlen. Beim Googlen entscheide ich, dass die Rangy -Bibliothek die beste Lösung ist. Ich habe folgenden Code:
%Vor% Das Problem ist, nachdem Funktion Ende Arbeit Fokus zurück zum div kommt, aber caret immer auf den div Anfang zeigen und ich kann überall tippen, außer div beginnen. Auch console.log-Typen folgen Rangy warning: Module SaveRestore: Marker element has been removed. Cannot restore selection.
Bitte helfen Sie mir, dieses Funktional zu implementieren. Ich bin offen für eine andere Lösung, nicht nur für die Bibliothek. Danke!
Ссылка Dies ist jsfiddle, aber es funktioniert nicht richtig (nichts geschieht, wenn ich Zahlen in mein div tippte), weiß ich es vielleicht nicht (erste Zeit PLZ via jsfiddle) oder Ressource unterstützt nicht contenteditable. UPD * Ich lese ähnliche Probleme beim Stackoverflow, aber Lösungen passen nicht zu meinem Fall: (
Das Problem besteht darin, dass Rangys Speicher- / Wiederherstellungs-Auswahlmodul unsichtbare Markierungselemente in das DOM einfügt, wo die Auswahlbegrenzungen sind, und dann entfernt Ihr Code alle HTML-Tags, einschließlich Rangys Markerelemente (wie die Fehlermeldung suggeriert). Sie haben zwei Möglichkeiten:
innerHTML einzufärben. Dies wird zuverlässiger, aber auch aufwendiger. AKTUALISIEREN
Ich habe einen Zeichenindex-basierten Auswahlspeicher für Rangy (Option 2 oben) aktiviert. Es ist ein bisschen grob, aber es macht den Job für diesen Fall. Es funktioniert, indem Textknoten durchquert werden. Ich kann das in irgendeiner Form zu Rangy hinzufügen. ( UPDATE 5. Juni 2012: Ich habe dies jetzt umgesetzt, in einem zuverlässiger, für Rangy. )
jsFiddle: Ссылка
Code:
%Vor%Ich möchte Tim für die Funktion danken, die er hier mit uns geteilt hat. Es war sehr wichtig für ein Projekt, an dem ich arbeite. Ich habe seiner Funktion ein kleines jQuery-Plugin hinzugefügt, auf das man hier zugreifen kann: Ссылка
%Vor% Das-Plugin tut nur, wofür ich es brauche, erhalte ausgewählten Text und setzt eine benutzerdefinierte Textauswahl. Es funktioniert auch für Textfelder und contentEditable divs.
Tags und Links javascript html range contenteditable rangy