Diese Frage wurde bereits gestellt, aber bis jetzt gibt es keine funktionierende Antwort, daher bin ich versucht, sie wieder zu öffnen, hoffentlich können wir einen Hack finden.
Ich habe einen contentEditable-Absatz und eine Texteingabe, wenn ich einen Text auswähle und auf die Eingabe klicke, ist die Auswahl weg.
Also ich habe versucht, die Auswahl bei Eingabe mousedown zu speichern und es wieder auf MouseUp wiederherzustellen und yeah es funktioniert (wie erwartet in Firefox) Aber ... in Chrome die Eingabe verlieren den Fokus : (
Sehen Sie es in Aktion ( chrome verwenden): Ссылка
Dies ist der Code, den ich verwendet habe:
HTML
%Vor%Javascript
%Vor%Da ich keinen Kommentar zu Maioman schreiben kann (etwas Reputation benötigt :)), hier ein kleiner Zusatz zu seiner Antwort:
Der Grund, warum es in Firefox nicht funktioniert, ist, dass die Auswahl gelöscht wird, wenn der Fokus auf das Eingabefeld gesetzt wird.
Alles funktioniert gut, wenn Sie ein mouseup-Ereignis auf dem p statt eines Fokusereignisses im Eingabefeld platzieren:
%Vor%Fügen Sie den Fokus innerhalb einer Timeout-Funktion hinzu, die Ihr Problem beheben sollte.
%Vor%jsfiddle: Ссылка
Ich habe ein wenig daran gearbeitet ... Es war eine sehr unterhaltsame und lehrreiche Übung
Ich habe hauptsächlich mit Maiomans Antwort angefangen.
Ich habe es so gemacht, dass der ausgewählte Text in einem Anker mit dem href im Eingabefeld endet ... Und der ausgewählte Text bleibt während der Eingabe des Links ausgewählt. Das ist mein Verständnis Ihrer Frage.
Siehe meine Arbeit Fiddle: Ссылка
Getestet für die Arbeit auf FF 46, Chrome 50, Safari 5.1 und Explorer 11.
Beachten Sie, dass classList nur in IE10 und höher unterstützt wird.
Außerdem sind die Links wegen des MouseUp-Ereignisses nicht "anklickbar".
Aber Sie können das Titelattribut bei Mouseover sehen.
Ich nehme an, Sie speichern die InnerHTML des Absatzes, um sie woanders auszugeben.
;)
CSS:
HTML:
JavaScript:
Das Ersetzen der ausgewählten Region durch ein span-Element (und das Einfärben) könnte eine Umgehungslösung sein:
funktioniert auf Chrome, aber nicht auf FF
wie von Eric vorgeschlagen mit mouseup event (Ich habe tatsächlich blur verwendet) auf p , um highlight(select()) aufzurufen, wird das Problem auf FF beheben.
Ich denke, es wird Ihre Frage nicht beantworten, aber für Ihren Zweck empfehle ich Ihnen dringend, Angular.js oder React.js zu verwenden. Wenn Sie noch nicht mit ihnen gearbeitet haben, haben Sie eine Lernkurve, aber auf lange Sicht wird es sich wirklich lohnen! (Sie finden es auch einfacher, kosmetisch "auszuwählen")
Ich hoffe, das hilft ...:)
Das Ersetzen der Auswahl durch <span> ist wahrscheinlich der einfachste Weg. Sie können auch ein <iframe> verwenden, das Google in Google Docs verwendet Auswahl von Text innerhalb des Dokuments beibehalten, während auf Elemente der Benutzeroberfläche geklickt wird.
Mit <span> könnte die Lösung so aussehen (diese Lösung baut auf Ihrem ursprünglichen Code und den Ideen der anderen Leute auf, besonders @Bekim Bacaj).
Hier ist ein sehr altes Snippet, das ich vor langer Zeit als Antwort auf eine andere Liste gepostet habe. Es könnte Ihnen helfen, Ihre aktuelle Strategie zu überdenken und die Notwendigkeit, das natürlich erwartete Verhalten des Fokus zu hacken, vollständig zu vermeiden.
Ich gebe Ihnen einen Hinweis und lassen Sie es selbst herausfinden. Sie müssen feststellen, ob Chrome verwendet wird. Fügen Sie in Ihrer Datei console.log(sel); nach sel = window.getSelection(); hinzu. Beachten Sie im Protokoll, dass die Auswahl in den verschiedenen Browsern unterschiedlich ist. Um ehrlich zu sein, ich bin mir nicht sicher, warum, aber das kann Ihnen helfen, herauszufinden, was das Problem ist.
Beachten Sie auch das gleiche Problem, wenn Sie sel.removeAllRanges(); auskommentieren, erhalten Sie einen Fehler, der Ihnen sagt, dass sie unterschiedlich sind, wie oben.
Tags und Links javascript range selection contenteditable